??�a?a ????? p????? d?af????, a? ?a? ta d?? �as????ta? st? �?�??????? JQuery.
?e? ??a Demo (a? ?a? ? e????a e??a? a??et? epe????�at???) st? http://j-quary.blogspot.com/
?G????S??S? ??? GALLERY S? BLOGGER
1. S??des? st?? blogger ???a??as�?
2. S?ed?as?> ?pe?e??as?a html
3. ?at??ta? ctrl+F st? p???t??????? �a? ??????�e ?a �???�e t? ]]></b:skin> ?a? ap? p??? t?? �????�e t?? a??????? ??d??a:
/* 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/AVvXsEjcvuopz7yEmu1NLn476bzackKP9vF3RRc5v78cDbJv4BgfObfq0222UFDhyphenhyphenBH5JPwMl_PpEfWYnrns3VwwRkSGjQ6BZu8G0_85e7ls7r8lg60FGS005cazLxfFELWd7X9ODjlUlsgz0fA5/) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}
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/AVvXsEjcvuopz7yEmu1NLn476bzackKP9vF3RRc5v78cDbJv4BgfObfq0222UFDhyphenhyphenBH5JPwMl_PpEfWYnrns3VwwRkSGjQ6BZu8G0_85e7ls7r8lg60FGS005cazLxfFELWd7X9ODjlUlsgz0fA5/) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}
4. ???a �??s???�e t? </head> ?a? p??? ap? a?t? ep???????�e t? pa?a??t?:
<script src='http://code.jquery.com/jquery-latest.js'
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>
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. ?p????e?s? p??t?p??!
6. ???a p?�e se S?ed?as?> St???e?a Se??da?> ???s???? gadget> HTML/JavaScript ?a? e?e? ep???????�e t?:
<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>
<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>
?????G?S? ?O????:
picture 1 Link: ed? �??ete t? url, t? d?e????s? t?? f?t???af?a? sa?
# : ed? �??ete t? link-s??des�? ?p?? ???ete ?a ?d??e?ta? ??p????, ?ta? pat?e? t?? f?t???af?a sa?. a? de? ???ete ?a �??ete ??p??? link af?ste t? #
G?a p??s?afa??es? f?t???af???, p??s?afa????�e t?? pa?a??t? ??a��?:
<li><a href="URL 1 #"><img src="picture 1 Link" alt="" /></a></li>
??? ?e??sete ?a ap????e?sete t? widget sa?.
Enjoy ???p??! ?a? af?ste ?a???a s????? ?a �??p? p?? p?te!!
?at? t? s????af? t?? pa?ap??? a???t?s??, ?????a t? pa?a??t? t?a???d?:
?????: 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/
