{"id":6688,"date":"2011-03-17T03:53:06","date_gmt":"2011-03-17T07:53:06","guid":{"rendered":"http:\/\/info.template-help.com\/?p=6688"},"modified":"2016-04-08T06:42:36","modified_gmt":"2016-04-08T10:42:36","slug":"gallery-with-fade-effect","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/gallery-with-fade-effect.html","title":{"rendered":"“Gallery with fade effect”"},"content":{"rendered":"A simple image gallery with a fade effect.\r\n\r\n

JavaScript<\/h3>\r\nWe should include jQuery framework by pointing src attribute in the script tag to those .js files.\r\n\r\n
\r\n<script type=\"text\/javascript\" src=\"js\/jquery-1.4.2.min.js\" ><\/script>\r\n<\/pre>\r\nInitialization script place either in the  <\/head> section or in some external .js file\r\n\r\n
\r\n$(function(){\r\n\r\n\/\/ first we create a function that will swap the images\r\n\r\nvar replaceImg=function(href){\r\n    var img=$('#gallery #pic img').eq(0),nImg=document.createElement('img')\r\n    $('#gallery #pic').append($(nImg).css('opacity',0))\r\n    nImg.onload=function(){$(this).animate({opacity:1},'fast');img.remove()}\r\n    nImg.src=href\r\n}\r\n\r\n\/\/ now the function that will proccess mouse click action on the preview image\r\n\r\n$('#gallery #thumbs li a').click(function(){\r\n    $('#gallery #thumbs .current').removeClass('current')\r\n    replaceImg($(this).attr('href'))\r\n    $(this).addClass('current')\r\n    return false\r\n})\r\n\r\n\/\/ the code below is for prev\/next buttons if they are required\r\n\r\n$('#gallery a[rel=\"next\"],#gallery #pic img').live('click',function(){\r\n    var curr,indx=0,len=$('#gallery #thumbs ul li a').length\r\n    $('#gallery #thumbs ul li a').each(function(){if(this.className.indexOf('current')!=-1){curr=indx}else{indx++}})\r\n    $('#gallery #thumbs ul li a.current').removeClass('current')\r\n    $('#gallery #thumbs ul li a').eq(((curr+1)<len)?curr+1:0).addClass('current')\r\n    replaceImg($('#gallery #thumbs ul li a.current').attr('href'))\r\n})\r\n$('#gallery a[rel=\"prev\"]').live('click',function(){\r\n    var curr,indx=0,len=$('#gallery #thumbs ul li a').length\r\n    $('#gallery #thumbs ul li a').each(function(){if(this.className.indexOf('current')!=-1){curr=indx}else{indx++}})\r\n    $('#gallery #thumbs ul li a.current').removeClass('current')\r\n    $('#gallery #thumbs ul li a').eq(curr-1).addClass('current')\r\n    replaceImg($('#gallery #thumbs ul li a.current').attr('href'))\r\n})\r\n})\r\n<\/pre>\r\n\r\n
HTML<\/h3>\r\nBelow you can see general HTML script representation:\r\n\r\n
\r\n<div id=\"gallery\">\r\n    <div id=\"pic\">\r\n<img alt=\"\" src=\"path_to_big_pic1\">\r\n<\/div>\r\n    <div id=\"thumbs\">\r\n        <ul>\r\n            <li>\r\n<a class=\"current\" href=\"path_to_big_pic1\">\r\n<img alt=\"\" src=\"path_to_thumb_pic1\">\r\n<\/a>\r\n<\/li>\r\n            <li>\r\n<a href=\"path_to_big_pic2\">\r\n<img alt=\"\" src=\"path_to_thumb_pic2\">\r\n<\/a>\r\n<\/li>\r\n            <li>\r\n<a href=\"path_to_big_pic3\">\r\n<img alt=\"\" src=\"path_to_thumb_pic3\">\r\n<\/a>\r\n<\/li>\r\n        <\/ul>\r\n        <a href=\"#\" rel=\"prev\">prev<\/a>\r\n        <a href=\"#\" rel=\"next\">next<\/a>\r\n    <\/div>\r\n<\/div>\r\n<\/pre>\r\n\r\n
CSS<\/h3>\r\n\r\n
\r\n#gallery #pic{\r\n    position:relative;\r\n    height:px; \/*the height of the big image*\/\r\n}\r\n\r\n#gallery #pic img{\r\n    position:absolute;\r\n}\r\n<\/pre>","protected":false},"excerpt":{"rendered":"
A simple image gallery with a fade effect. JavaScript We should include jQuery framework by pointing src attribute in the script tag to those .js files. <script type=”text\/javascript” src=”js\/jquery-1.4.2.min.js” ><\/script> Initialization script place either in the section or in some external .js file $(function(){ \/\/ first we create a function that will swap the images […]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[267,270],"tags":[499,813],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/6688"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=6688"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/6688\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=6688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=6688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=6688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}