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

Gallery Εικόνων - Image Effect με jQuery Hover / Zoom για Blogger


Print Friendly and PDFPrintPrint Friendly and PDFPDF

Ακόμα δεν έχει περάσει μια μέρα από το πρώτο slider-gallery εικόνων που είπαμε, και να και το δεύτερο. Έτσι για να έχετε επιλογές!
Βέβαια έχουν πολλές διαφορές, αν και τα δύο βασίζονται στη βιβλιοθήκη JQuery.
Δες ένα Demo (αν και η εικόνα είναι αρκετά επεξηγηματική) στο http://j-quary.blogspot.com/

ΕΓΚΑΤΑΣΤΑΣΗ ΤΟΥ GALLERY ΣΕ BLOGGER

1. Σύνδεση στον blogger λογαριασμό
2. Σχεδίαση> Επεξεργασία html
3. Πατώντας ctrl+F στο πληκτρολόγιό μας ψάχνουμε να βρούμε το ]]></b:skin> και από πάνω του βάζουμε τον ακόλουθο κώδικα:

/* 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKAblZ5sUToFQ55ARkZZhkfeU0TTmzV_HK_MnhVftQ2KTcwWtJPRp4TueF1k0GUWn1r-rquGdxWYEYDD6j5GQ0cE6kPpYErGvFdVdhukGbQ9EvoTl4jQp5Tv5X-ZgzXOqKJuEnLXS_llFQ/) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

4. Τώρα βρίσκουμε το </head> και πριν από αυτό επικολλούμε το παρακάτω:

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});

});
</script>

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

6. Τώρα πάμε σε Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη gadget> HTML/JavaScript και εκεί επικολλούμε το:

<ul class="thumb">
<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 αφήστε το #

Για προσθαφαίρεση φωτογραφιών, προσθαφαιρούμε την παρακάτω γραμμή:

<li><a href="URL 1 #"><img src="picture 1 Link" alt="" /></a></li>

Μην ξεχάσετε να αποθηκεύσετε το widget σας.

Enjoy λοιπόν! Και αφήστε κανένα σχόλιο να βλέπω πως πάτε!!

Κατά τη συγγραφή της παραπάνω ανάρτησης, άκουγα το παρακάτω τραγούδι:




Πηγές: http://www.allblogtools.com/tricks-and-hacks/how-to-add-images-gallery-widget-with-jquery-hover-zoom-to-your-blogger/
Copyrights: http://www.bloggertips.gr/

Stumble
Delicious
Technorati
Twitter
Facebook

19 comments:

Unknown είπε...

Πολύ ωραίο tip...
όμως όταν το εγκατέστησα είδα ότι δημιουργούσε πρόβλημα στο slider που έχω στο blog και έτσι το αφαίρεσα.
Υπάρχει κάτι που μπορώ να κάνω?

SKANDALOS είπε...

Πολύ ωραίο και κατά περίπτωση μπορεί να είναι εκτός από θεαματικό και χρήσιμο.

Ευχαριστώ.

Unknown είπε...

εξαιρετικό. το μόνο πρόβλημα που βρήκα είναι οτι οταν βάλω στη θέση του # το λίνκ δεν γίνεται τίποτα. μήπως χρειάζεται και κάτι άλλο για να δουλέψει?

nils είπε...

πολυ καλο αλλα το link που βαζω για να ανοιγει με την φωτο κανει ανoιγμα μονο με δεξι κλικ σε νεα καρτελα.. απευθειας με kλικ στο link δεν ανοιγει...


καποια συμβουλη?



ευχαριστω!!!!!

xespao είπε...

ΠΑΙΔΙΑ ΓΙΑ ΝΑ ΔΟΥΛΕΨΕΙ ΜΕ ΤΑ LINK ΠΡΕΠΕΙ ΝΑ ΑΦΑΙΡΕΣΕΤΕ ΑΠΟ ΤΟΝ ΚΩΔΙΚΟ ΤΟ ΚΟΜΜΑΤΙ ;return false; ΠΟΥ ΕΙΝΑΙ ΣΤΟ ΚΑΤΩ ΜΕΡΟΣ. ΤΟ ΕΙΔΑ ΣΤΟ ALLBLOGS ΚΑΙ ΟΤΑΝ ΤΟ ΕΚΑΝΑ ΔΟΥΛΕΨΕ

Unknown είπε...

Καλησπέρα!
Θα ήθελα να ρωτήσω αν ακολουθήσω τα παραπάνω βήματα και μετά αντί να προσθέσω gadget , δημιουργήσω page και γράψω εκέι τον κώδικά για τις φώτο θα δουλέψει?

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

@Chris
για να δουλέψει ένα html/javascript widget σε σελίδα θα πρέπει στην επεξεργασία σελίδας => επεξεργασία Html και εκεί να κανεις επικόλληση τον κωδικα σου δες ένα παράδειγμα εδώ http://xristinags.blogspot.com/p/blog-page_1675.html

xespao είπε...

Καλησπέρα!
Μπορεί κάποιος να μου εξηγήσει πως δημιουργείται page στο blog όπως λέει ο Chris?
Μου φάνηκε πολύ ενδιαφέρον!

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

Πως Δημιουργεις σελίδα:
design(Σχεδιση)->Ανάρτηση->επεξεργασία σελίδων(ψηλα στο κέντρο περίπου)->ΝΕΑ ΣΕΛΙΔΑ (μπορεις να δημιουργήσεις έως και 10 σελίδες)

Unknown είπε...

Ο κώδικας δουλεύει αλλά άμα τον προσθέσεις σε page και όχι σε gadget εμφανίζει bullets και τις εικόνες σαν να είναι σκαλάκια
μπορεί να διορθωθεί?

SKANDALOS είπε...

Καλημέρα.

Το έχω εφαρμόζει και εδώ:
http://serneikaravi.blogspot.com/2011/11/blog-post.html

και δεν δουλεύει σωστά, ενώ σε ένα άλλο που το είχα εφαρμόσει δουλεύει μια χαρά.
Μπορεί κανείς να βοηθήσει να βρω λύση και σε αυτό να δουλέψει;

Ευχαριστώ

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

ευχαριστώ

o-skulos.blogspot.com

ΔΙΚΤΥΟΥΡΓΟΣ είπε...

Ορέ παίδες ξέρει κανείς πως να το κάνει να δουλεύει και σε αναρτήσεις όχι μόνο σαν gadget? Αυτό δυστυχώς δουλέυει μόνο σαν gadget

Unknown είπε...

ειναι φοβερό οπως τα περισσότερα που μας χαρίζεις να εισαι πάντα καλά φίλε μου σου εύχομαι το 2012 να εισαι καλά και χαρούμενος και ολο το χρόνο με ενα μεγάλο χαμόγελο και να μας θυμάσαι και μας οπωτε εχεις χρόνο τα φιλαράκια σου βρε!!!!!

Unknown είπε...

ωραίο κομμάτι...

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 */ }
Πώς μπορώ να το βγάλω???

administrator είπε...

παιδιά η σελίδα σας με βοήθησε πάρα πολυ είστε οι καλύτεροι ευτιαξά ενα πειραματικο blog για το χωριό μου !!!! http://palaiokklisi.blogspot.gr/2012/03/web-tv.html?spref=fb

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

Ρε παιδιά είναι φυσιολογικό όταν πατάω επάνω να μεγαλώνει ελάχιστα η φωτογραφία και όχι να δείχνει το αποθηκευμένο μέγεθος;Και αν ναι τι νόημα έχει αν δεν μπορεί να την δει ο άλλος μεγαλωμένη.

βλαχος είπε...

πολύ ωραίο είναι ......

αλλά όταν το εγκατέστησα είδα ότι δημιουργούσε πρόβλημα στο slider που έχω στο blog και έτσι το αφαίρεσα κι εγώ όπως ο APOELwall.
Μπορούμε να εφαρμόσουμε κάτι άλλο .

Υπάρχει κάτι που μπορώ να κάνω?

ευχαριστώ

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

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

ΟΧΙ 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 *