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

Παρασκευή, Σεπτεμβρίου 25

0

jQuery Thumbnail Hover/Zoom Effect για εικόνες




Πρόσφατα σέρφαρα στο internet και έτυχα πάνω σε αυτό το  Effect  και μου άρεσε πάρα πολύ . Σκέφτηκα να το  μοιραστώ  μαζί σας , ίσως και να το βρείτε χρήσιμο. Μπορείτε να το προσθέσετε όπου εσείς θέλετε στο header, sidebar,πάνω από το την κυρίως στήλη στο footer columns η όπου αλλού σας βολέψει. Λοιπόν ώρα για δουλεία…… Για να το βάλουμε στο blog  μας κάνουμε τα εξής :

  ΒΗΜΑ 1ο :  Βαζουμε τα   Gallery Codes στο  Template μας .       
  1. Σύνδεση στο λογαριασμό blogger σας –> Διάταξη – > Επεξεργασία HTML και ψάχνουμε το  κωδικό  ]]></b:skin> 
  2. Πριν από το  ]]></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 */
}
3. Έπειτα βρίσκουμε το  </head>  και κολλάμε πριν από αυτό το παρακάτω κωδικό   :

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"> </script>
<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>
Τώρα εφόσον βάλαμε τους κωδικούς, κάνουμε Αποθήκευση Προτύπου και πάμε στο επόμενο βήμα .  

ΒΗΜΑ 2ο : Δίνουμε βάση ,κτίζουμε το XHTML 

Βάζετε τους κωδικούς παρακάτω όπου θέλετε εσείς .  
Αν θέλετε να το βάλετε σαν widget  τότε  πάμε  Διάταξη –> Στοιχεία Σελίδας –> Προσθήκη gadget –> και επιλεγούμε  HTML/Javascript .  
Αν θέλετε να το βάλετε στην ανάρτηση σας απλά αντιγράφετε και κολλάτε εκεί τους κωδικούς

<ul class="thumb"> <li><a href="#"><img src="thumb1.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb2.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb3.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb4.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb5.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb6.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb7.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb8.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb9.jpg" alt="" /></a></li>
</ul>
Κατόπιν αντί για το  “ picture 1 Link  “ εισάγετε το Url της εικόνας σας και εάν θέλετε να κάνετε τη σύνδεση εικόνας με μια άλλη σελίδα ή url αντί για  “ # “ προσθέστε το  url της σελίδας , όπου θέλετε να οδηγήσει η εικόνα .  
Κάθε φορά που θέλετε να βάλετε και άλλη εικόνα  στο γκαλερί σας , απλά  επαναλαμβάνετε το κωδικό παρακάτω


<li><a href="#"><img src="thumb1.jpg" alt="" /></a></li>


ΔΕΊΤΕ ΤΟ DEMO

0:

 

© 2010 Bloggertrics

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

ΑΡΧΙΚΗ| Sitemap| Posts RSS