Slideshow with thumbnail gallery and zoom-effects


/ Published in: JavaScript
Save to your folder(s)

Free JavaScript slideshow with thumbnail gallery, zoom-in-effect, zoom-out-effect and transparency-effect (opacity). Add as many pictures as you like. Each picture can be linked and commented. The thumbnail gallery can be displayed or hidden. True copy-and-paste installation. Most of the design can be set with CSS (within the style-tags). Works with Internet Explorer 5x/6x/7x/8x/9x, Firefox 3x/4x, Opera 7x/8x/9x/10x/11x, Google Chrome 4x/5x/6x/7x/8x/9x.


Copy this code and paste it in your HTML
  1. <!---------------------------------->
  2. <!-- START OF SLIDESHOW SCRIPT -->
  3. <!---------------------------------->
  4.  
  5. <!-- START OF STYLE CONFIGURATION -->
  6. <style>
  7. .commentstyle{
  8. /* style attributes for the comments below the pictures */
  9. font-family:Arial;
  10. font-size:9pt;
  11. color:brown;
  12. vertical-align:middle;
  13. text-align:center;
  14. padding:5px;
  15. }
  16.  
  17. .thumbnailstyle{
  18. /* style attributes for the thumbnails */
  19. margin:3px;
  20. width:67px;
  21. border-style:solid;
  22. border-width:1px;
  23. border-color:white;
  24.  
  25. /* shadow for Firefox */
  26. -moz-box-shadow: 2px 2px 3px #AAAAAA;
  27.  
  28. /* shadow for Safari and Chrome */
  29. -webkit-box-shadow: 2px 2px 3px #AAAAAA;
  30.  
  31. /* shadow for Opera */
  32. box-shadow: 2px 2px 3px #AAAAAA;
  33.  
  34. /* shadow for Internet Explorer */
  35. filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#AAAAAA');
  36. }
  37.  
  38. .slideshowstyle{
  39. /* style attributes for the slideshow-box */
  40. /* ATTENTION: width and height must be set within the script */
  41. overflow:hidden;
  42. border-style:solid;
  43. border-width:1px;
  44. border-color:white;
  45. background-color:#EEEEEE;
  46. background-image: url(tile.jpg);
  47. margin:3px;
  48.  
  49. /* shadow for Firefox */
  50. -moz-box-shadow: 5px 5px 8px #AAAAAA;
  51.  
  52. /* shadow for Safari and Chrome */
  53. -webkit-box-shadow: 5px 5px 8px #AAAAAA;
  54.  
  55. /* shadow for Opera */
  56. box-shadow: 5px 5px 5px #AAAAAA;
  57.  
  58. /* shadow for Internet Explorer */
  59. filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#AAAAAA');
  60. }
  61. </style>
  62. <!-- END OF STYLE CONFIGURATION -->
  63.  
  64. <script>
  65. // CREDITS:
  66. // Slideshow with thumbnail gallery and zoom-effects
  67. // by Peter Gehrig
  68. // Copyright (c) 2011 Peter Gehrig. All rights reserved.
  69.  
  70. // IMPORTANT:
  71. // If you add this script to a script-library or script-archive
  72. // you have to add a link to http://www.fabulant.com on the webpage
  73. // where this script will be running.
  74.  
  75. var picture= [
  76.  
  77. /////////////////////////////////////////////
  78. // START OF SCRIPT CONFIGURATION
  79. /////////////////////////////////////////////
  80.  
  81. // Set the URLs of images, the links and comments.
  82. // Add as many pictures a you like
  83. // Each image requires a block, as shown below:
  84. // {
  85. // imgsrc : "http://www.the-url.com/of/your/image.jpg",
  86. // linkto : "http://www.where-you-go-if-you-click-on-the big-image.com",
  87. // comment : "the comment below the image",
  88. // }, each block ends with a comma (exception: the very last block)
  89.  
  90. {
  91. imgsrc : "../../pics/300x180bluefish.jpg",
  92. linkto : "http://www.hotscripts.com",
  93. comment : "Let's go fishing "
  94. }, // comma required
  95.  
  96. {
  97. imgsrc : "../../pics/300x180bonbons.jpg",
  98. linkto : "http://www.hotscripts.com",
  99. comment : "Not as sweet as you"
  100. }, // comma required
  101.  
  102. {
  103. imgsrc : "../../pics/300x180butterfly.jpg",
  104. linkto : "http://www.hotscripts.com",
  105. comment : "Fly away, my little butterfly"
  106. }, // comma required
  107.  
  108. {
  109. imgsrc : "../../pics/300x180castle.jpg",
  110. linkto : "http://www.hotscripts.com",
  111. comment : "My castle is my home"
  112. }, // comma required
  113.  
  114. {
  115. imgsrc : "../../pics/300x180fruitshop.jpg",
  116. linkto : "http://www.hotscripts.com",
  117. comment : "Are fruits really healthy for you? "
  118. }, // comma required
  119.  
  120. {
  121. imgsrc : "../../pics/300x180herbstwald.jpg",
  122. linkto : "http://www.hotscripts.com",
  123. comment : "Did you see Robin Hood behind the trees?"
  124. }, // comma required
  125.  
  126. {
  127. imgsrc : "../../pics/300x180lemons.jpg",
  128. linkto : "http://www.hotscripts.com",
  129. comment : "I like lemons"
  130. }, // comma required
  131.  
  132. {
  133. imgsrc : "../../pics/300x180tree.jpg",
  134. linkto : "http://www.hotscripts.com",
  135. comment : "The truth about trees "
  136. } // ATTENTION: the last entry requires NO final comma
  137.  
  138. ]
  139.  
  140. // pause (seconds)
  141. var stillstand=2
  142.  
  143. // speed of zooming. Higher value means faster zooming
  144. var zoomspeed=20
  145.  
  146. // width of slideshow (px). Width of slideshow and width of images should be identical
  147. var slideshowwidth=300
  148.  
  149. // height of slideshow (px). Height of slideshow and height of images should be identical
  150. var slideshowheight=180
  151.  
  152. // Shall thumbnails be displayed? Enter "yes" or "no"
  153. var show_thumbnails="yes"
  154.  
  155. /////////////////////////////////////////////
  156. // END OF SCRIPT CONFIGURATION
  157. /////////////////////////////////////////////
  158.  
  159. // Do not edit below this line
  160. var imgpreload=new Array()
  161. for (iii=0;iii<=picture.length-1;iii++) {
  162. imgpreload[iii]=new Image()
  163. imgpreload[iii].src=picture[iii].imgsrc
  164. }
  165.  
  166. var positionleft=0
  167. var positiontop=0
  168. var timer
  169. var marginright=0
  170. var i_fadestrength=0
  171. var i_images=0
  172. var step=1
  173. var content_image
  174. var content_text
  175. var imageboxwidth=0
  176. var imageboxheight=0
  177. var imagebasicwidth=0
  178. var imagebasicheight=0
  179. var moveon=true
  180. var timer
  181. var timerpause
  182. var stopid
  183. stillstand*=1000
  184.  
  185. function setimage() {
  186. if (i_images>=picture.length) {i_images=0}
  187. content_image="<a href='"+picture[i_images].linkto+"'><img border=0 name='newpic' src='"+picture[i_images].imgsrc+"'></a>"
  188. content_text=picture[i_images].comment
  189. document.getElementById('imagebox').innerHTML=content_image
  190. document.getElementById('textbox').innerHTML=content_text
  191. imagebasicwidth=document.newpic.width
  192. imagebasicheight=document.newpic.height
  193. if (show_thumbnails=="yes"){
  194. if (document.all) {
  195. for (i=0;i<=picture.length-1;i++) {
  196. document.getElementById(i).filters.alpha.opacity=30
  197. }
  198. }
  199. else {
  200. for (i=0;i<=picture.length-1;i++) {
  201. document.getElementById(i).style.opacity=0.3
  202. }
  203. }
  204. }
  205. timer=setTimeout("startenlarge()",50)
  206. }
  207.  
  208. function startenlarge() {
  209. if (moveon) {
  210. if (imageboxwidth<imagebasicwidth) {
  211. content_image="<a href='"+picture[i_images].linkto+"'><img border=0 name='newpic' src='"+picture[i_images].imgsrc+"' width="+imageboxwidth+"></a>"
  212. document.getElementById('imagebox').innerHTML=content_image
  213. imageboxwidth=document.newpic.width
  214. imageboxheight=document.newpic.height
  215. if (document.all) {
  216. document.getElementById('imagebox').filters.alpha.opacity=Math.floor(i_fadestrength)
  217. document.getElementById('textbox').filters.alpha.opacity=Math.floor(i_fadestrength)
  218. if (show_thumbnails=="yes"){
  219. document.getElementById(i_images).filters.alpha.opacity=Math.floor(i_fadestrength)
  220. }
  221.  
  222. }
  223. else {
  224. document.getElementById('imagebox').style.opacity=(i_fadestrength)/100
  225. document.getElementById('textbox').style.opacity=(i_fadestrength)/100
  226. if (show_thumbnails=="yes"){
  227. document.getElementById(i_images).style.opacity=(i_fadestrength)/100
  228. }
  229. }
  230. document.getElementById('imagebox').style.left=(slideshowwidth/2-imageboxwidth/2)+"px"
  231. document.getElementById('imagebox').style.top=(slideshowheight/2-imageboxheight/2)+"px"
  232. document.getElementById('imagebox').style.overflowX="hidden"
  233. document.getElementById('imagebox').style.visibility="visible"
  234. step+=0.5
  235. i_fadestrength+=(100/(slideshowwidth/zoomspeed))
  236. imageboxwidth+=zoomspeed
  237. timer=setTimeout("startenlarge()",50)
  238. }
  239. else {
  240. clearTimeout(timer)
  241. pauseimage()
  242. }
  243. }
  244. else {
  245. clearTimeout(timer)
  246. stopanimation()
  247. }
  248. }
  249.  
  250. function pauseimage() {
  251. if (moveon) {
  252. content_image="<a href='"+picture[i_images].linkto+"'><img border=0 name='newpic' src='"+picture[i_images].imgsrc+"' width="+imagebasicwidth+" height="+imagebasicheight+"></a>"
  253.  
  254. document.getElementById('imagebox').style.left=0+"px"
  255. document.getElementById('imagebox').style.top=0+"px"
  256. document.getElementById('imagebox').innerHTML=content_image
  257. if (document.all) {
  258. document.getElementById('imagebox').filters.alpha.opacity=100
  259. document.getElementById('textbox').filters.alpha.opacity=100
  260. if (show_thumbnails=="yes"){
  261. document.getElementById(i_images).filters.alpha.opacity=100
  262. }
  263. }
  264. else {
  265. document.getElementById('imagebox').style.opacity=1
  266. document.getElementById('textbox').style.opacity=1
  267. if (show_thumbnails=="yes"){
  268. document.getElementById(i_images).style.opacity=1
  269. }
  270. }
  271. i_fadestrength=0
  272. timer=setTimeout("finishenlarge()",stillstand)
  273. }
  274. else {
  275. clearTimeout(timer)
  276. stopanimation()
  277. }
  278. }
  279.  
  280. function finishenlarge() {
  281. if (moveon) {
  282. if (i_fadestrength<=100) {
  283. content_image="<a href='"+picture[i_images].linkto+"'><img border=0 name='newpic' src='"+picture[i_images].imgsrc+"' width="+imageboxwidth+"></a>"
  284. document.getElementById('imagebox').innerHTML=content_image
  285. imageboxwidth=document.newpic.width
  286. imageboxheight=document.newpic.height
  287. if (document.all) {
  288. document.getElementById('imagebox').filters.alpha.opacity=Math.floor(100-i_fadestrength)
  289. document.getElementById('textbox').filters.alpha.opacity=Math.floor(100-i_fadestrength)
  290. }
  291. else {
  292. document.getElementById('imagebox').style.opacity=(100-i_fadestrength)/100
  293. document.getElementById('textbox').style.opacity=(100-i_fadestrength)/100
  294. }
  295. document.getElementById('imagebox').style.left=(slideshowwidth/2-imageboxwidth/2)+"px"
  296. document.getElementById('imagebox').style.top=(slideshowheight/2-imageboxheight/2)+"px"
  297. document.getElementById('imagebox').style.overflow="hidden"
  298. document.getElementById('imagebox').style.visibility="visible"
  299. i_fadestrength+=5
  300. imageboxwidth+=zoomspeed
  301. timer=setTimeout("finishenlarge()",20)
  302. }
  303. else {
  304. clearTimeout(timer)
  305. i_fadestrength=0;
  306. step=1;
  307. i_images++
  308. if (i_images>=picture.length) {i_images=0}
  309. imageboxwidth=0
  310. timer=setTimeout("setimage()",50)
  311. }
  312. }
  313. else {
  314. clearTimeout(timer)
  315. stopanimation()
  316. }
  317. }
  318.  
  319. function onmsover(thisimg) {
  320. stopid=thisimg.id
  321. if (show_thumbnails=="yes"){
  322. if (document.all) {
  323. for (i=0;i<=picture.length-1;i++) {
  324. document.getElementById(i).filters.alpha.opacity=30
  325. }
  326. document.getElementById(stopid).filters.alpha.opacity=100
  327. }
  328. else {
  329. for (i=0;i<=picture.length-1;i++) {
  330. document.getElementById(i).style.opacity=0.3
  331. }
  332. document.getElementById(stopid).style.opacity=1
  333. }
  334. }
  335. moveon=false
  336. }
  337.  
  338. function onmsout(thisimg) {
  339. moveon=true
  340. i_images=thisimg.id
  341. clearTimeout(timer)
  342. setimage()
  343. }
  344.  
  345. function stopanimation() {
  346. content_image="<a href='"+picture[stopid].linkto+"'><img border=0 name='newpic' src='"+picture[stopid].imgsrc+"' width="+imagebasicwidth+" height="+imagebasicheight+"></a>"
  347. document.getElementById('imagebox').style.left=0+"px"
  348. document.getElementById('imagebox').style.top=0+"px"
  349. document.getElementById('imagebox').innerHTML=content_image
  350. content_text=picture[stopid].comment
  351. document.getElementById('textbox').innerHTML=content_text
  352. if (document.all) {
  353. document.getElementById('imagebox').filters.alpha.opacity=100
  354. document.getElementById('textbox').filters.alpha.opacity=100
  355. }
  356. else {
  357. document.getElementById('imagebox').style.opacity=1
  358. document.getElementById('textbox').style.opacity=1
  359. }
  360. i_fadestrength=0
  361. }
  362.  
  363. if (show_thumbnails=="yes") {
  364. document.write("<DIV id='roofthumbnails' style='position:relative;width:"+slideshowwidth+"px;'>")
  365. for (i=0;i<=picture.length-1;i++) {
  366. document.write("<img class='thumbnailstyle' onmouseover='onmsover(this)' onmouseout='onmsout(this)' id='"+i+"' style='filter:alpha(opacity=50') src='"+picture[i].imgsrc+"'>")
  367. }
  368. document.write("</DIV>")
  369. }
  370.  
  371. document.write("<DIV id='roofimages' class='slideshowstyle' style='position:relative;width:"+slideshowwidth+"px;height:"+slideshowheight+"px;overflow:hidden'>")
  372. if (document.all) {
  373. document.write("<DIV id='imagebox' style='position:absolute;left:0px;top:0px;filter:alpha(opacity=0);'></DIV>")
  374. }
  375. else {
  376. document.write("<DIV id='imagebox' style='position:absolute;opacity:1;'></DIV>")
  377. }
  378.  
  379. document.write("</DIV>")
  380.  
  381. document.write("<DIV style='position:relative;width:"+slideshowwidth+"px;'>")
  382.  
  383. document.write("<DIV><table style='width:"+slideshowwidth+"px;'><tr><td class='commentstyle' id='textbox' style='filter:alpha(opacity=0);'></td></tr></table></DIV>")
  384.  
  385. document.write("<DIV><table style='width:"+slideshowwidth+"px;'><tr><td class='commentstyle' id='textbox' style='filter:alpha(opacity=0);'></td></tr></table></DIV>")
  386.  
  387. document.write("</DIV>")
  388.  
  389.  
  390. onload=setimage
  391. </script>
  392. <!---------------------------------->
  393. <!-- END OF SLIDESHOW SCRIPT -->
  394. <!---------------------------------->

URL: http://www.fabulant.com/downloadcenter/imgfadezoom/imgfadezoom.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.