Làm thế nào để Thêm Widget Gallery Hình ảnh Với jQuery Zoom / Hover Để Blogger của bạn.

 ]]></ B: skin> 

 / * Blogger Phóng Gallery By AllBlogTools.com * /

 ul.thumb {

 float: left;

 danh sách theo phong cách: không;

 margin: 0; padding: 10px;

 chiều rộng: 360px;

 }

 ul.thumb li {

 margin: 0; padding: 5px;

 float: left;

 vị trí: tương đối; / * Thiết lập cơ sở vị trí tuyệt đối phối hợp * /

 chiều rộng: 110px;

 chiều cao: 110px;

 }

 ul.thumb li img {

 chiều rộng: 100px, chiều cao: 100px; / * Thiết lập kích thước hình ảnh thu nhỏ nhỏ * /

 -Ms-suy-mode: bicubic / * IE Sửa chữa cho các tỷ lệ Bicubic * /

 biên giới: 1px solid # ddd;

 padding: 5px;

 : # f0f0f0;

 vị trí: tuyệt đối;

 còn lại: 0; top: 0;

 }

 ul.thumb li img.hover {

 không lặp lại trung tâm trung tâm; / * Hình ảnh được sử dụng như nền tảng về hiệu ứng di chuột

 biên giới: không; / * Loại bỏ biên giới trên di chuột * /

 } 

 </ Head> 

 <Script src = 'http://code.jquery.com/jquery-latest.js'

 type = 'text / javascript' />

 <script type='text/javascript'>

 $ (Tài liệu) đã sẵn sàng (function ().



 / / Thu nhỏ xem trước



 $ ("Ul.thumb li"). Hover (function () {

 $ (This) css ({'z-index: '10'});

 $ (Này). Tìm thấy ('img') addClass ("di chuột"). Stop (.)

 Animate ({

 marginTop: '-110px',

 marginLeft: '-110px'

 : '50% ',

 bên trái: '50% ',

 chiều rộng: '174px ',

 chiều cao: '174px ',

 padding: '20px '

 }, 200);



 }, Function () {

 $ (This) css ({'z-index: "0"});

 $ (Này). Tìm thấy ('img') removeClass ("di chuột"). Stop (.)

 Animate ({

 marginTop: '0 ',

 marginLeft: '0 ',

 top: 0 ",

 bên trái: "0",

 chiều rộng: '100px ',

 chiều cao: '100px ',

 padding: '5 px

 }, 400);

 });



 / / Hoán đổi hình ảnh trên Click

 $ ("Ul.thumb li a"). Click (function () {



 var mainImage = $ (this) attr ("href"); / / Tìm Tên ảnh

 $ ("# Main_view img") attr ({src: mainImage});

 trả về false; 

 });



 });

 </ Script>

 <ul class="thumb">

 <li> <a href=" # "> <img src=" hình ảnh 1 Link" alt="" /> </ a> </ li>

 <li> <a href=" #> <img src=" hình ảnh 2 Link alt="" /> </ a> </ li>

 <li> <a href=" #> <img src=" hình ảnh 3 liên kết "alt="" /> </ a> </ li>

 <li> <a href=" # "> <img src=" hình ảnh 4 liên kết" alt="" /> </ a> </ li>

 </ Ul>

 <li> <a href=" URL 1 # "> <img src=" hình ảnh 1 Link" alt="" /> </ a> </ li>