Gallery Εικόνων – Image Effect με jQuery Hover / Zoom για Blogger
Ακόμα δεν έχει περάσει μια μέρα από το πρώτο slider-gallery εικόνων που είπαμε, και να και το δεύτερο. Έτσι για να έχετε επιλογές!
Βέβαια έχουν πολλές διαφορές, αν και τα δύο βασίζονται στη βιβλιοθήκη JQuery.
Δες ένα Demo (αν και η εικόνα είναι αρκετά επεξηγηματική) στο http://j-quary.blogspot.com/
ΕΓΚΑΤΑΣΤΑΣΗ ΤΟΥ GALLERY ΣΕ BLOGGER
1. Σύνδεση στον blogger λογαριασμό
2. Σχεδίαση> Επεξεργασία html
3. Πατώντας ctrl+F στο πληκτρολόγιό μας ψάχνουμε να βρούμε το ]]></b:skin> και από πάνω του βάζουμε τον ακόλουθο κώδικα:
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}
4. Τώρα βρίσκουμε το </head> και πριν από αυτό επικολλούμε το παρακάτω:
type=’text/javascript’/>
<script type=’text/javascript’>
$(document).ready(function(){
//Larger thumbnail preview
$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px',
height: '174px',
padding: '20px'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 400);
});
//Swap Image on Click
$("ul.thumb li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
</script>
5. Αποθήκευση προτύπου!
6. Τώρα πάμε σε Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη gadget> HTML/JavaScript και εκεί επικολλούμε το:
<li><a href=”#“><img src=”picture 1 Link” alt=”” /></a></li>
<li><a href=”#”><img src=”picture 2 Link” alt=”” /></a></li>
<li><a href=”#”><img src=”picture 3 Link” alt=”” /></a></li>
<li><a href=”#”><img src=”picture 4 Link” alt=”” /></a></li>
</ul>
ΕΠΕΞΗΓΗΣΗ ΚΩΔΙΚΑ:
picture 1 Link: εδώ βάζετε το url, τη διεύθυνση της φωτογραφίας σας
# : εδώ βάζετε το link-σύνδεσμο όπου θέλετε να οδηγείται κάποιος, όταν πατάει την φωτογραφία σας. αν δεν θέλετε να βάλετε κάποιο link αφήστε το #
Για προσθαφαίρεση φωτογραφιών, προσθαφαιρούμε την παρακάτω γραμμή:
Μην ξεχάσετε να αποθηκεύσετε το widget σας.
Enjoy λοιπόν! Και αφήστε κανένα σχόλιο να βλέπω πως πάτε!!
20
comments:
APOELwall
είπε…
Πολύ ωραίο tip…
όμως όταν το εγκατέστησα είδα ότι δημιουργούσε πρόβλημα στο slider που έχω στο blog και έτσι το αφαίρεσα.
Υπάρχει κάτι που μπορώ να κάνω?
7 Ιουνίου 2011 – 12:20 μ.μ.
Makedon
είπε…
Πολύ ωραίο και κατά περίπτωση μπορεί να είναι εκτός από θεαματικό και χρήσιμο.
Ευχαριστώ.
11 Ιουνίου 2011 – 12:45 μ.μ.
vasilis
είπε…
εξαιρετικό. το μόνο πρόβλημα που βρήκα είναι οτι οταν βάλω στη θέση του # το λίνκ δεν γίνεται τίποτα. μήπως χρειάζεται και κάτι άλλο για να δουλέψει?
19 Ιουνίου 2011 – 6:37 μ.μ.
nils
είπε…
πολυ καλο αλλα το link που βαζω για να ανοιγει με την φωτο κανει ανoιγμα μονο με δεξι κλικ σε νεα καρτελα.. απευθειας με kλικ στο link δεν ανοιγει…
καποια συμβουλη?
ευχαριστω!!!!!
23 Ιουνίου 2011 – 10:50 π.μ.
xespao
είπε…
ΠΑΙΔΙΑ ΓΙΑ ΝΑ ΔΟΥΛΕΨΕΙ ΜΕ ΤΑ LINK ΠΡΕΠΕΙ ΝΑ ΑΦΑΙΡΕΣΕΤΕ ΑΠΟ ΤΟΝ ΚΩΔΙΚΟ ΤΟ ΚΟΜΜΑΤΙ ;return false; ΠΟΥ ΕΙΝΑΙ ΣΤΟ ΚΑΤΩ ΜΕΡΟΣ. ΤΟ ΕΙΔΑ ΣΤΟ ALLBLOGS ΚΑΙ ΟΤΑΝ ΤΟ ΕΚΑΝΑ ΔΟΥΛΕΨΕ
11 Αυγούστου 2011 – 5:58 μ.μ.
Dj KaSt
είπε…
Ευχαριστώ πολύ
http://freedownloadalltorrents.blogspot.com/
14 Αυγούστου 2011 – 1:36 μ.μ.
Chris
είπε…
Καλησπέρα!
Θα ήθελα να ρωτήσω αν ακολουθήσω τα παραπάνω βήματα και μετά αντί να προσθέσω gadget , δημιουργήσω page και γράψω εκέι τον κώδικά για τις φώτο θα δουλέψει?
31 Αυγούστου 2011 – 10:29 μ.μ.
Ανώνυμος
είπε…
@Chris
για να δουλέψει ένα html/javascript widget σε σελίδα θα πρέπει στην επεξεργασία σελίδας => επεξεργασία Html και εκεί να κανεις επικόλληση τον κωδικα σου δες ένα παράδειγμα εδώ http://xristinags.blogspot.com/p/blog-page_1675.html
6 Σεπτεμβρίου 2011 – 6:44 μ.μ.
xespao
είπε…
Καλησπέρα!
Μπορεί κάποιος να μου εξηγήσει πως δημιουργείται page στο blog όπως λέει ο Chris?
Μου φάνηκε πολύ ενδιαφέρον!
6 Σεπτεμβρίου 2011 – 8:15 μ.μ.
Ανώνυμος
είπε…
Πως Δημιουργεις σελίδα:
design(Σχεδιση)->Ανάρτηση->επεξεργασία σελίδων(ψηλα στο κέντρο περίπου)->ΝΕΑ ΣΕΛΙΔΑ (μπορεις να δημιουργήσεις έως και 10 σελίδες)
6 Σεπτεμβρίου 2011 – 11:15 μ.μ.
Chris
είπε…
Ο κώδικας δουλεύει αλλά άμα τον προσθέσεις σε page και όχι σε gadget εμφανίζει bullets και τις εικόνες σαν να είναι σκαλάκια
μπορεί να διορθωθεί?
24 Σεπτεμβρίου 2011 – 7:41 μ.μ.
Makedon
είπε…
Καλημέρα.
Το έχω εφαρμόζει και εδώ:
http://serneikaravi.blogspot.com/2011/11/blog-post.html
και δεν δουλεύει σωστά, ενώ σε ένα άλλο που το είχα εφαρμόσει δουλεύει μια χαρά.
Μπορεί κανείς να βοηθήσει να βρω λύση και σε αυτό να δουλέψει;
Ευχαριστώ
1 Νοεμβρίου 2011 – 10:56 π.μ.
Ανώνυμος
είπε…
ευχαριστώ
o-skulos.blogspot.com
4 Νοεμβρίου 2011 – 6:04 μ.μ.
tigris
είπε…
Ορέ παίδες ξέρει κανείς πως να το κάνει να δουλεύει και σε αναρτήσεις όχι μόνο σαν gadget? Αυτό δυστυχώς δουλέυει μόνο σαν gadget
4 Νοεμβρίου 2011 – 6:32 μ.μ.
gorbi
είπε…
ειναι φοβερό οπως τα περισσότερα που μας χαρίζεις να εισαι πάντα καλά φίλε μου σου εύχομαι το 2012 να εισαι καλά και χαρούμενος και ολο το χρόνο με ενα μεγάλο χαμόγελο και να μας θυμάσαι και μας οπωτε εχεις χρόνο τα φιλαράκια σου βρε!!!!!
28 Δεκεμβρίου 2011 – 9:11 π.μ.
Ilias Fotos
είπε…
ωραίο κομμάτι…
21 Ιανουαρίου 2012 – 12:58 μ.μ.
Maria Soulou
είπε…
Για κάποιο λόγο μου εμφανίζει πάνω-πάνω αυτό το μνμ: /* Blogger Zoom Gallery By AllBlogTools.com */ ul.thumb { float: left; list-style: none; margin: 0; padding: 10px; width: 360px; } ul.thumb li { margin: 0; padding: 5px; float: left; position: relative; /* Set the absolute positioning base coordinate */ width: 110px; height: 110px; } ul.thumb li img { width: 100px; height: 100px; /* Set the small thumbnail size */ -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */ border: 1px solid #ddd; padding: 5px; background: #f0f0f0; position: absolute; left: 0; top: 0; } ul.thumb li img.hover { background:url(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center; /* Image used as background on hover effect border: none; /* Get rid of border on hover */ }
Πώς μπορώ να το βγάλω???
22 Ιανουαρίου 2012 – 9:08 μ.μ.
Παλαιοκκλήσι Καρδίτσα palaioklisi isari-net
είπε…
παιδιά η σελίδα σας με βοήθησε πάρα πολυ είστε οι καλύτεροι ευτιαξά ενα πειραματικο blog για το χωριό μου !!!! http://palaiokklisi.blogspot.gr/2012/03/web-tv.html?spref=fb
8 Νοεμβρίου 2012 – 8:18 μ.μ.
Ανώνυμος
είπε…
Ρε παιδιά είναι φυσιολογικό όταν πατάω επάνω να μεγαλώνει ελάχιστα η φωτογραφία και όχι να δείχνει το αποθηκευμένο μέγεθος;Και αν ναι τι νόημα έχει αν δεν μπορεί να την δει ο άλλος μεγαλωμένη.
26 Μαρτίου 2013 – 1:08 μ.μ.
new bomba
είπε…
πολύ ωραίο είναι ……
αλλά όταν το εγκατέστησα είδα ότι δημιουργούσε πρόβλημα στο slider που έχω στο blog και έτσι το αφαίρεσα κι εγώ όπως ο APOELwall.
Μπορούμε να εφαρμόσουμε κάτι άλλο .
Υπάρχει κάτι που μπορώ να κάνω?
ευχαριστώ
29 Δεκεμβρίου 2013 – 6:46 μ.μ.
Δημοσίευση σχολίου
Παρακαλούμε τους φίλους αναγνώστες:
ΟΧΙ SPAM,
ΟΧΙ GREEKLISH,
ΟΧΙ ΠΡΟΣΒΛΗΤΙΚΑ ΣΧΟΛΙΑ
Παρακαλώ το σχόλιό σας να είναι σχετικό με την παραπάνω ανάρτηση.
Γενικές απορίες μόνο στη σελίδα μας στο facebook.