Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Δευτέρα, Οκτωβρίου 19

4

Πως να βάλετε το Slimbox 2.02 για jquery-1.4.2 στο Bloggspot / Εύκολη εγκατάσταση ! Updeted

Slimbox 2
Εγκαταστήστε εύκολα στο Blog σας το Slimbox 2
                       Δείτε το slimbox2 DEMO

Το Slimbox 2 είναι ένας οπτικός κλώνος του δημοφιλούς Lightbox 2  και χρησιμοποιεί τη βιβλιοθήκη jQuery javascript . Έχει ως σκοπό να είναι πολύ μικρό, αποδοτικό, πρότυπο-φιλικό, πλήρως εξατομικεύσιμο,  και συμβατό 100% με το αρχικό Lightbox 2.

Συμβατότητα :

Το Slimbox 2 είναι συμβατό με όλες τα σύγχρονα Browsers:
Firefox 1.5+, Internet Explorer 6+, όπερα 9+ και όπερα για Wii, Safari 3+, Camino και Google Chrome . Όταν χρησιμοποιείται με το jQuery , είναι επίσης συμβατό με την όπερα 8.5 και το σαφάρι 2.

Πώς να εγκαταστήσετε SlimBox σε Blogger:

Καταρχήν, αν θέλετε να φιλοξενήσετε τα scripts στο δικό σας server ,μεταφορτώστε slimbox-2.02.zip και το jQuery javascript .
  • Ας δούμε τώρα τι πρέπει να κάνετε για να το εγκαταστήσετε στο blog σας :
1. Πρώτα απ' όλα συνδεθείτε στο λογαριασμό του Blogger σας και από τον "Πίνακα ελέγχου" σας πηγαίνετε Σχεδίαση >> Επεξεργασία HTML και πατήστε στο κουτάκι Επέκταση προτύπων γραφικών στοιχείων

2 . Τώρα, εντοπίστε στο πρότυπό σας την ετικέτα ]]></b:skin> και κολλήστε τον ακόλουθο κώδικα ακριβώς από πάνω :

/* SLIMBOX */

#lbOverlay {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
#lbCenter, #lbBottomContainer {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: #fff;
}
.lbLoading {
background: #fff url(http://sites.google.com/site/bl12tr34/archeiotheke/loading.gif) no-repeat center;
}
#lbImage {
position: absolute;
left: 0;
top: 0;
border: 10px solid #fff;
background-repeat: no-repeat;
}
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: 0;
width: 50%;
outline: none;
}
#lbPrevLink {
left: 0;
}
#lbPrevLink:hover {
background: transparent url(http://sites.google.com/site/bl12tr34/archeiotheke/prevlabel.gif) no-repeat 0 15%;
}
#lbNextLink {
right: 0;
}
#lbNextLink:hover {
background: transparent url(http://sites.google.com/site/bl12tr34/archeiotheke/nextlabel.gif) no-repeat 100% 15%;
}
#lbBottom {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: left;
border: 10px solid #fff;
border-top-style: none;
}
#lbCloseLink {
display: block;
float: right;
width: 66px;
height: 22px;
background: transparent url(http://sites.google.com/site/bl12tr34/archeiotheke/closelabel.gif) no-repeat center;
margin: 5px 0;
outline: none;
}
#lbCaption, #lbNumber {
margin-right: 71px;
}
#lbCaption {
font-weight: bold;
}

3 . Τώρα,εντοπίστε την ετικέτα </head> και κολλήστε τους παρακάτω κωδικούς ακριβώς απο πάνω :

 <!-- Start jQuery -->
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>google.load(&quot;jquery&quot;, &quot;1.4.2&quot;);</script>
<!-- End jQuery -->
<script src='http://sites.google.com/site/bl12tr34/archeiotheke/slimbox2.js' type='text/javascript'/>
<!-- End slimbox2 --> 

Αποθηκεύετε το τώρα πρότυπό σας και πάμε στο επόμενο βήμα .

Ενεργοποιήστε το slimbox2 :


Για να χρισημοποιησετε το slimbox2 , Κάθε φορά που δημοσιεύετε εικόνες , προσθέστε το rel=" lightbox" ιδιότητες στους κωδικούς των εικόνων σας .
Χρησιμοποιήστε επίσης και τις προαιρετικές ιδιότητες τίτλου εάν θέλετε να παρουσιάσετε έναν τίτλο.

Δηλαδή, θα ανεβάζετε κανονικά τις φωτογραφίες σας στην ανάρτησή σας και εδώ ειναι το κολπο , θα πατήσετε στην φόρμα που κάνουμε τις αναρτήσεις , τον σύνδεσμο Επεξεργασία HTML και μετα μέσα στους κωδικούς της φωτογραφίας σας απλά θα κολλήσετε rel="lightbox" title="Εδώ ο τίτλος που θέλετε "



Για παράδειγμα :

Ο κώδικας της φωτογραφίας σας θα φαίνεται κάπως έτσι :


<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_L116RpGjEMY/Sr-
NNPbs-RI/AAAAAAAAAUI/dqFzaA0kDaw/s1600/15.jpg"
imageanchor="1" style="margin-left: 1em; margin-right: 1em;" >
<img border="0"height="158"
src="http://4.bp.blogspot.com/_L116RpGjEMY/Sr-NNPbs-RI/AAAAAAAAAUI/dqFzaA0kDaw/s200/15.jpg"width="200"/></a></div>


Και εσείς πρέπει να κολλήστε τις γραμμές που ενεργοποιούν το slimbox και ο κώδικας της φωτογραφίας σας πρέπει να φαίνεται έτσι :


<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_L116RpGjEMY/Sr-
NNPbs-RI/AAAAAAAAAUI/dqFzaA0kDaw/s1600/15.jpg " 
imageanchor="1"style="margin-left: 1em; margin-right: 1em;"rel="lightbox" title="Εδώ ο τίτλος που θέλετε"><img border="0" height="158" 
src="http://4.bp.blogspot.com/_L116RpGjEMY/Sr-NNPbs-RI/AAAAAAAAAUI/dqFzaA0kDaw/s200/15.jpg " width="200" /></a></div>

Πιστεύω οτι είναι εύκολο ετσι ?

Για να μην ξεχνάτε τους κωδικους ενεργοποιήσετε απλά κάνετε το έξης:

1 . Πηγαίνετε στην καρτέλα "Ρυθμίσεις "και μετα πατάτε Διαμόρφωση , κατεβείτε στην σελίδα προς τα κατω , μέχρι να βρείτε την επιλογή "Πρότυπο Ανάρτησης ".
Δίπλα θα βρείτε ένα textarea εκει μέσα κόλλησε τους κωδικούς ενεργοποιήσεις rel="lightbox" title="Εδω ο τιτλος που θελεις " και αποθηκεύετε τις επιλογές σας !

2 . Τώρα κάθε φορά που θα κάνετε καινούργια ανάρτηση , μέσα στο κουτί της ανάρτησης θα εμφανίζονται αυτοί οι κωδικοί ενεργοποιήσεις .
Αν δεν θέλετε να τις χρησιμοποιήσετε απλά τους διαγράφετε και κάνετε κανονικά την ανάρτησή σας , αλλιώς, κάνετε αποκοπή και επικόλληση αυτών των κωδικών ενεργοποίησης, μέσα στου κωδικούς της φωτογραφίας σας και ετσι διευκολύνετε και τον εαυτό σας !

Ομαδοποιήστε τις εικόνες σας

Για μια ομάδα σχετικών εικόνων , προσθέστε ένα όνομα ομάδας στις ιδιότητες rel αμέσως μετά από τη λέξη «lightbox» .

Για ομάδα σχετικών εικόνων απλά θα κολλήσετε τους παρακάτω κωδικούς σε όσες εικόνες θέλετε να ομαδοποιήσετε :

rel="lightbox-ο τίτλος ομάδας εικόνων εδώ " title="εδώ ο τίτλος για την φωτογραφία "

Παράδειγμα χρήσης :


<div class="separator" style="clear: both; text-align: center;">
<a href="http://χχχχχχχχχχχχχχ.jpg " imageanchor="1" 
style="margin-left: 1em; margin-right: 1em;" rel=" lightbox- τα ταξίδια μου " title="Το ταξίδι μου στην Γαλλία "   >
<img border="0" height="158" src="http://χχχχχχχχχχχχχχχχχ.jpg " width="200" /></a></div>

<div class="separator" style="clear: both; text-align: center;">
<a href="http://χχχχχχχχχχχχχχ.jpg  " imageanchor="1" 
style="margin-left: 1em; margin-right: 1em;" rel=" lightbox- τα ταξίδια μου " title="Το ταξίδι μου στην Αμερική "  >
<img border="0" height="158" src="http://χχχχχχχχχχχχχχχχχ.jpg " width="200" /></a></div>

Αυτην την διαδικασία θα ακολουθήσετε για οσες φωτογραφίες θέλετε να ομαδοποιήσετε .

Απλά να προσέχετε , το " rel="lightbox- τα ταξίδια μου " θα είναι το ίδιο για όσες φωτογραφίες θέλετε να ομαδοποιήσετε και για το title="Το ταξίδι μου στην Αμερική" ,θα αλλάξετε τον τίτλο ανάλογα με την κάθε φωτογραφία σας .

Καλή επιτυχία σε όλους !

4:

giwrgos είπε...

xairete...prospathw na prosthesw afti tin litourgia se ena blog pou thelw na stisw alla den exw katalavei akoma pws tha emfanistei sto telos kai pws egw tha kanw tis eikones na emfanizonte me afto ton tropo... Ekei pou lete gia tin energopoiisi tou lightbox kai tin prosthiki tou "kodika" stis foto pou thelw na anevasw...mporeite na dosete merikes akoma plirofories?


Euxaristw prokatavolika

bloggertrics είπε...

Καλησπέρα Γιώργο και χρόνια σου πολλά  :-D

Λοιπόν , θα ακολουθήσεις ολα τα βήματά για να εγκαταστήσεις το Lightbox στο  blog σου .
Όταν τελειώσεις , για την ευκολία σου  ανέβασε  τις φωτογραφίες σου στο δικόυ σου λογαριασμού <span>Λευκώματα ιστού Picasa</span><span><span>  ,  στην φόρμα που κάνεις αναρτήσεις κοίτα από πάνω  θα δεις 3 καρτέλες , εκεί πατάς την καρτέλα ΕΠΕΞΕΡΓΑΣΊΑ HTML  δες την φώτο 1</span></span>

bloggertrics είπε...

<p>Εκει θα κολλήσεις τον κωδικα ενεργοποίησης  : 
</p><p><span>image #1</span>
</p><p> 
</p><p>Αντιγραφεις τον κώδικά της φωτογραφίας σου και αλλάζεις το <span>images/image-1.jpg </span><span>με το url της φωτογραφίας σου .</span>
</p><p> 
</p><p>Όπου <span>my caption <span>γράφεις την περιγραφή που θέλεις να δώσεις στην φωτογραφία σου </span></span>
</p><p>Οπου <span>image #1 θα γράψεις τον τίτλο της φωτογραφίας σου και αυτό είναι όλο </span>
<span>
</span>


</p>

Galini είπε...

Σοφία μόλις έκανα αυτό που περιγράφεις (με τον τρόπο <span>image #1)</span>, αλλά έχω 2 θεματάκια
1. Δεν μου εμφανίζει το thumbnail της φωτογραφίας, λέει σκέτο image#1, #2, #3 κλπ...
2. Δεν περπατάει με βελάκι δεξιά αριστερά. Πρέπει να ανοίγω κάθε φώτο μόνη της... Τι μπορεί να φταίει?
Επίσης, πειράζει εάν έχω τις φώτο μου στο photobucket και όχι στο picassa, με βολεύει καλύτερα?

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS