Latest Blog News: Διαβάζετε πάντα και τα ΣΧΟΛΙΑ των αναρτήσεων!

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


Print Friendly and PDFPrintPrint Friendly and PDFPDF

Σήμερα θα ασχοληθούμε με ένα πολύ ενδιαφέρον θέμα, που έλειπε εως τώρα από το αρχείο του 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

Stumble
Delicious
Technorati
Twitter
Facebook

10 comments:

techandtech είπε...

Γιαννη,καλο ειναι αλλα επειδη ειναι ψιλοφασαρια,εγω προσωπικα περιμενω να δω ολοκληρωμενα τα δυναμικα θεματα του blogger που λογικα θα κυκλοφορησουν συντομα[αυτα που ενεργοποιουμε με το view]και που πιστευω θα περιλαμβανουν και gadgets .
ειδικα το mosaic με επεξεργασια και gadgets ειναι απιθανο.
ασε που με αυτα θα γλυτωσουμε απο πολλους επιπλεον κωδικες που εχουμε περασει στα template γιατι δεν θα χρειαζονται μιας και περιλαμβανονται στο αρχικο template απο το blogger[κατι reed more,κατι με αριθμηση σελιδων κ.λ.π.].

Johnpatra είπε...

φασαρία είναι αυτό όντως για αυτό και εγώ δεν το βάζω, αλλά ειναι πολυ καλο..

όσο για τα δυναμικά πρότυπα που λες, χαμπάρι δεν έχω πάρει ακόμη, γενικώς αυτόν τον καιρό τα εχω ψηλοπαρατησει λίγο λόγω έλλειψης χρόνου.

αλλά ενδιαφέρον ακούγονται, θα το ψάξω

2DesignPlus είπε...

Επειδή παιδέυτικα αρκετά με τι θέμα ρπιν απο 2-3 εβδομάδες, να δώσω μια πιο έυκολη λύση (χωρίς παρεξήγηση) αρχικά κατεβάζουμε το anv photo flash maker το οποίο είναι ένα πολύ εύκολο πρόγραμμα δημιουργίας photoslides με αρκετά ωραία templates αφυ το έχουμε φτιάξει και αποθηκεύση στον υπολογιστή μας πάμε στο megaswf.com φτιάχνουμε ένα λογαριασμό και κάνουμε upload το slide μας και απο εκεί παίρνουμε τον embed κωδικό όπως κάνουμε και με τα βιντεάκια απο το youtube και τον βάζουμε στο blog μας, είναι πολύ απλό, δείτε εδώ αυτό που έχω ανεβάσει στο blog μου http://2designplus.blogspot.com/p/projects.html

Johnpatra είπε...

thnx u 2 Design Plus !

Nassis είπε...

είναι ίσως ένα από τα καλύτερα και εύκολο να το βάλεις παίζει όμως ένα πρόβλημα με τα βίντεο του ytube αν τύχει και είναι κοντά στην photo που ανοίγεις. Επικαλύπτουν την photo και δεν μπορείς να πατήσεις κλείσιμο. Στα βίντεο από dailymotion δεν υπάρχει αυτό το πρόβλημα. Σε τέτοια περίπτωση κλείνεις την photo με ESC αλλά σου το χαλάει το εφεδάκι και κάνει το μπλογκ σου να δείχνει πρόχειρο.

POLYDOROS είπε...

Βρέθηκαν περισσότερα γραφικά στοιχεία με αναγνωριστικό: HTML15. Τα αναγνωριστικά γραφικών στοιχείων πρέπει να είναι μοναδικά.

afto to sfalma mou vgazei

Αιθέρας είπε...

ΑΝ υπάρχει slide στο blog μας μπορουμε να βάλουμε οτιδήποτε floating διχως πρόβλημα?

isari-net είπε...

με βάλατε σε πολλές σκέψεις σήμερα

Ανώνυμος είπε...

Φοβερό και πολύ εύκολο. Υπάρχει η δυνατότητα να εμφανίζεται μία μόνο φωτογραφία στην σελίδα και πατώντας πάνω της, να εμφανίζονται μία μία και οι υπόλοιπες για να μην γεμίσει η σελίδα με σκόπριες φωτογραφίες;

Ανώνυμος είπε...

Μια χαρά όλα. Όταν όμως ανοίγεις μια
φωτογραφία. Η σελίδα δεν κάνει scroll, κολλάει και μόνο με ανανέωση ξανανοίγει.

Δημοσίευση σχολίου

Παρακαλούμε τους φίλους αναγνώστες:

ΟΧΙ SPAM,
ΟΧΙ GREEKLISH,
ΟΧΙ ΠΡΟΣΒΛΗΤΙΚΑ ΣΧΟΛΙΑ

Παρακαλώ το σχόλιό σας να είναι σχετικό με την παραπάνω ανάρτηση.
Γενικές απορίες μόνο στη σελίδα μας στο facebook.

 
© Copyright 2009-14 bloggertips.gr | All rights reserved. | Επικοινωνία | LK Magazine v2 from Lasantha | Πίσω στην ΚΟΡΥΦΗ | | Subscribe in a reader (Google,Yahoo κα)

* free blogger tips,tricks,gadgets,widgets,templates,themes,help,hacks,design,domains,xml,html,blogspot.gr *