[jQuery] - แบบเจ๋งๆ Hover Responsive Portfolio Gallery with Jquery

วันนี้ แต่งบล็อก เสนอ  jQuery slide thumbnail แบบเจ๋งๆอีกเช่นเคย  โดดเด่นสวยงาม thumbnail title ของแต่ละรูปภาพ จะเลื่อนไปตามการเคลื่อนไหวของเมาส์  เมื่อคุณเลื่อนเมาส์เข้า หรือเลื่อนเมาส์ออก

ด้วยหลักการทำงานของ CSS3 และ jQuery จึงเกิดการ Slide ที่สวยงาม สร้างที่น่าสนใจแก่เว็บไซต์ของคุณมากยิ่งขึ้น

ขั้นตอนการติดตั้ง Responsive Portfolio Gallery with Jquery

ก่อนอื่นให้คุณ Login เข้าไปที่ blogger.com และจากแผงควบคุมให้เข้าไปที่ แม่แบบ >> แก้ไข HTML 


ขั้นที่ 1 ติดตั้ง CSS โค้ดเพื่อกำหนดรูปแบบ 

ให้คุณค้นหาโค้ด ]]></b:skin> และเมื่อพบแล้วให้วางโค้ดด้านล่างนี้ลงไปก่อนหน้าโค้ด ]]></b:skin> 

/* Portolio Hover */
.da-thumbs li ,
.da-thumbs li  img {
 display: block;
 position: relative;
}
.da-thumbs li  {
 overflow: hidden;
}
.da-thumbs li  article {
 position: absolute;
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Wcw4IoKlVvNka2PcGkDvw_ZgToPzMPbFiV7W-3pz_toY9TI-hio8JScauUN56X3oYIKqAsuTlDulumt5BRPi39b1APqAx1Lw6vDYy-Ynxr84rbdnyY0qJ_nGj1hnYR0-FcMJE3PlR299/s1600/image_hover.png);
 background-repeat:repeat;
 width: 100%;
 height: 100%;
}
.da-thumbs li  article.da-animate {
 -webkit-transition: all 0.2s ease;
 -moz-transition: all 0.2s ease-in-out;
 -o-transition: all 0.2s ease-in-out;
 -ms-transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out;
}
/* Initial state classes: */
.da-slideFromTop {
 left: 0px;
 top: -100%;
}
.da-slideFromBottom {
 left: 0px;
 top: 100%;
}
.da-slideFromLeft {
 top: 0px;
 left: -100%;
}
.da-slideFromRight {
 top: 0px;
 left: 100%;
}
/* Final state classes: */
.da-slideTop {
 top: 0px;
}
.da-slideLeft {
 left: 0px;
}
.da-thumbs li  article a {
 color:#fff;
 padding:20px;
 display:block;
}
.da-thumbs {
text-align:center;
}
.da-thumbs li  article h3{
color:#fff;
padding-top:30px;
}
.post-outer h3:hover {}
.da-thumbs li  article em{
margin-bottom:10px;
color:#fff;
display:block;
}
.da-thumbs li  article span{
display:inline-block;
}
span.link_post{
display:block;
width:35px;
height:35px;
background-color:#DF6232;
border-radius:50px;
cursor:pointer;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmnxQVlHK28PcoQPsDJd2dbIjCEI0cIDzOukRhcFVYWpqvFpBSnJgLb1hFC0vbIpTPuITEGwdYpuHiQjIbuYo1eL6Tb_XoMgdcAdTOE6Usk_MjN7AxiAwmFVKqLQm3xbcOBewvFc8S5LvO/s1600/link_post_icon.png);
background-repeat:no-repeat;
background-position:center;
margin-right:10px;
}
span.zoom{
overflow:hidden;
display:block;
width:35px;
height:35px;
background-color:#DF6232;
border-radius:50px;
cursor:pointer;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE-H56DcNSPGgsxhO4_EMLr9c2_44A8NTN2c33wpNCeLjBeigqBPQacc0tWSD4q2uljT9biZi-PYcLk_tiZYWDcDDhaG44YJFVnkWBIHbm_EwOMOHAXgdsutK2VnW91u7WQWD-7wi-Nfsk/s1600/zoom_icon.png);
background-repeat:no-repeat;
background-position:center;
margin-left:10px;
}
.portfolio_2col article h3{
padding-top:70px !important;
}
/* Image Grid */
.image_grid {
 float:left;
 overflow:hidden;
 width:700px;
 position:relative;
}
.image_grid li{
 float: left;
 line-height: 17px;
 color: #686f74;
 list-style:none;
 overflow:hidden;
 margin-bottom:23px;
 margin-right:23px;
 text-align:center;
}

/* Responsive image grid*/
/* Mobile landscape width 320 */
@media only screen and (max-width: 767px) {
.image_grid{
width:300px;
}
.image_grid li img{
width:220px;
}
.portfolio_4col .da-thumbs li article h3{
padding-top:70px;
}
.portfolio_3col .da-thumbs li article h3{
padding-top:50px;
}
.portfolio_2col .da-thumbs li article h3{
padding-top:53px !important;
}
}


 @media only screen and (min-width: 480px) and (max-width: 767px) {
.image_grid{
width:450px;
}
.image_grid li{
width:178px !important;
}
.portfolio_4col .da-thumbs li article h3{
padding-top:58px;
}
.portfolio_3col .da-thumbs li article h3{
padding-top:34px;
}
.portfolio_2col .da-thumbs li article h3{
padding-top:23px !important;
}
}

ขั้นที่ 2 ติดตั้ง Javascript (jQuery)

ให้คุณค้นหาโค้ด </head> และเมื่อพบแล้วให้วางโค้ดด้านล่างนี้ลงไปก่อนหน้าโค้ด</head>

<script src="https://sites.google.com/site/siani3d99/home/code/jquery-v1.7.1.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/siani3d99/home/code/jquery-hover-effect.js"></script>

ขั้นที่ 3 ติดตั้ง Javascript เรียกใช้งาน jQuery

ให้คุณค้นหาโค้ด </body> และเมื่อพบแล้วให้วางโค้ดด้านล่างนี้ลงไปก่อนหน้าโค้ด </body>

<script type="text/javascript">

jQuery(document).ready(function(){
jQuery(function() {
    jQuery('ul.da-thumbs > li').hoverdir();
});
});
</script>

จากนั้นก็บันทึกเทมเพลต

ขั้นที่ 4 ติดตั้ง HTML รูปภาพที่ต้องการแสดง

ให้นำโค้ด ไปวางตามตำแหน่งที่ต้องการ หรืออาจจะวางใน Gadget html ก็ได้ครับ

โดยแก้ไข src= url  url รูปภาพ  <h3> ไตเติ้ล <em>รายละเอียด href= url

<!-- Portfolio 4 Column start -->
<div class="freshdesignweb">
<div class="image_grid portfolio_4col">
<ul class="portfolio_list da-thumbs" id="list" style="height: 495px;">
<li>
<img alt="img" src="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio1.jpg" />
<article class="da-animate da-slideFromRight" style="display: block;">
<h3>
New Year 2013</h3>
<em>Happy</em>
<span class="link_post"><a href="http://www.freshdesignweb.com/responsive-portfolio-gallery-with-jquery-tutorial.html"></a></span>
<span class="zoom"><a href="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio1.jpg"></a></span>
</article>
</li>
<li>
<img alt="img" src="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio2.jpg" />
<article class="da-animate da-slideFromTop" style="display: block;">
<h3>
lifestyle</h3>
<em>auctor</em>
<span class="link_post"><a href="http://www.freshdesignweb.com/responsive-portfolio-gallery-with-jquery-tutorial.html"></a></span>
<span class="zoom"><a href="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio2.jpg"></a></span>
</article>
</li>
<li>
<img alt="img" src="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio3.jpg" />
<article class="da-animate da-slideFromLeft" style="display: block;">
<h3>
Models</h3>
<em>ipsum</em>
<span class="link_post"><a href="http://www.freshdesignweb.com/responsive-portfolio-gallery-with-jquery-tutorial.html"></a></span>
<span class="zoom"><a href="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio3.jpg"></a></span>
</article>
</li>
<li>
<img alt="img" src="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio4.jpg" />
<article class="da-animate da-slideFromRight" style="display: block;">
<h3>
Fashion</h3>
<em>China</em>
<span class="link_post"><a href="http://www.freshdesignweb.com/responsive-portfolio-gallery-with-jquery-tutorial.html"></a></span>
<span class="zoom"><a href="https://www.blogger.com/images/portfolio4.jpg"></a></span>
</article>
</li>
<li>
<img alt="img" src="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio5.jpg" />
<article class="da-animate da-slideFromRight" style="display: block;">
<h3>
Asean life</h3>
<em>lobortis</em>
<span class="link_post"><a href="http://www.freshdesignweb.com/responsive-portfolio-gallery-with-jquery-tutorial.html"></a></span>
<span class="zoom"><a href="https://www.blogger.com/images/portfolio5.jpg"></a></span>
</article>
</li>
<li>
<img alt="img" src="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio6.jpg" />
<article class="da-animate da-slideFromRight" style="display: block;">
<h3>
Asean life</h3>
<em>elementum</em>
<span class="link_post"><a href="http://www.freshdesignweb.com/responsive-portfolio-gallery-with-jquery-tutorial.html"></a></span>
<span class="zoom"><a href="https://www.blogger.com/images/portfolio6.jpg"></a></span>
</article>
</li>
<li>
<img alt="img" src="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio7.jpg" />
<article class="da-animate da-slideFromRight" style="display: block;">
<h3>
Asean life</h3>
<em>risus</em>
<span class="link_post"><a href="http://www.freshdesignweb.com/responsive-portfolio-gallery-with-jquery-tutorial.html"></a></span>
<span class="zoom"><a href="https://www.blogger.com/images/portfolio7.jpg"></a></span>
</article>
</li>
<li>
<img alt="img" src="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio8.jpg" />
<article class="da-animate da-slideFromLeft" style="display: block;">
<h3>
Asean life</h3>
<em>arcu</em>
<span class="link_post"><a href="http://www.freshdesignweb.com/responsive-portfolio-gallery-with-jquery-tutorial.html"></a></span>
<span class="zoom"><a href="https://www.blogger.com/images/portfolio8.jpg"></a></span>
</article>
</li>
<li>
<img alt="img" src="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio7.jpg" />
<article class="da-animate da-slideFromRight" style="display: block;">
<h3>
Asean life</h3>
<em>risus</em>
<span class="link_post"><a href="http://www.freshdesignweb.com/responsive-portfolio-gallery-with-jquery-tutorial.html"></a></span>
<span class="zoom"><a href="https://www.blogger.com/images/portfolio7.jpg"></a></span>
</article>
</li>
</ul>
</div>
</div>
<!-- Portfolio 4 Column End -->

ตัวอย่าง

• 

  New Year 2013

  Happy
• 

  lifestyle

  auctor
• 

  Models

  ipsum
• 

  Fashion

  China
• 

  Asean life

  lobortis
• 

  Asean life

  elementum
• 

  Asean life

  risus
• 

  Asean life

  arcu
• 

  Asean life

  risus