Slider Εικόνων - The Best Image Effect! - Slimbox 2.02 για jquery 1.4.2

Σήμερα θα ασχοληθούμε με ένα πολύ ενδιαφέρον θέμα, που έλειπε εως τώρα από το αρχείο του bloggertips.gr Είναι ένα πασίγνωστο εφέ εικόνων. Ίσως το καλύτερο στο είδος του. Είναι ένα slider εικόνων, που διευκολύνει τον χρήστη να βλέπει τις εικόνες και είναι και πολύ όμορφο εκτός από πρακτικό.

Δείτε ένα Demo αυτού του Image Effect στο http://www.posel.co.uk/slimbox/ (πάτα πάνω στις εικόνες για να καταλάβεις).
Καλό, ε? Σίγουρα θα το έχεις ξαναδει, γιατί χρησιμοποιείται πολύ σε πολύ μεγάλα και γνωστά sites (π.χ. newsit.gr).

Για να το εγκαταστήσουμε στο Blogger ακολουθούμε την παρακάτω διαδικασία:

1. Σύνδεση στον λογαριασμό μας στο Βlogger, πάντα από το Blogger Draft
2. Πανόπτης> Σχεδίαση> Επεξεργασία html> "Επέκταση προτύπων γραφικών στοιχείων"
3. Αναζητούμε (πάντα με τη βοήθεια του ctrl+F του browser μας) το ]]></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;
}

4. Τώρα ψάχνουμε για το </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 -->

5. Αποθήκευση προτύπου


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

Πολύ απλά όποτε θέλουμε να το χρησιμοποιήσουμε προσθέτουμε την ετικέτα rel="lightbox" στον κώδικα της εικόνας μας. Πολύ απλό. Καταλάβατε? Είμαι σίγουρος πως όχι, για αυτό πρέπει να διαβάσετε μια παλαιότερη ανάρτησή μου, την http://www.bloggertips.gr/2009/09/picture-html-code.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>

Και εμείς προσθέτουμε τους κόκκινους κωδικούς:

<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>

Για πολλές εικόνες μαζί βάζουμε την παρακάτω ετικέτα:

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="Το ταξίδι μου στην Αμερική" ,θα αλλάξετε τον τίτλο ανάλογα με την κάθε φωτογραφία σας .

Να ευχαριστήσω δημόσια την παλιά φίλη Σοφία Καραγιάλη που μέσα από το ξεχωριστό blog της, http://bloggertrics.blogspot.com/, που όμοιό του δύσκολα θα ξαναυπάρξει, μας έχει εμπλουτίσει τις γνώσεις μας γύρω από το blog design. Σε ευχαριστούμε πολύ Σοφία και ελπίζουμε να ξανασυνεχίσεις τη θαυμάσια δουλειά σου. Και αυτή η ανάρτηση δεν θα υπήρχε δίχως εκείνη.

Πηγές: αρχικές πηγές από http://www.digitalia.be/software/slimbox2 και εικόνα και προσαρμογή κωδικών από http://bloggertrics.blogspot.com/2009/10/slimbox-202-jquery-132-bloggspot.html

Copyrights: http://www.bloggertips.gr/