Posted By

fabulant on 03/11/11


Tagged

javascript opacity script flash download fun free web slideshow zoom applet picture


Versions (?)

Slideshow with thumbnail gallery and zoom-effects


 / Published in: JavaScript
 

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

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.

  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. <!---------------------------------->

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: hardwork23 on September 21, 2018

Here you will be able to grab information regarding control panel windows 10 so try out how to access control panel in windows 10 this portal which will really help you to have all exact ways to get rid of all your hurdles facing while finding out control panel windows 10.

Posted By: Abbiealaric on September 25, 2018

Hello, I have downloaded wowslider free form and I'm endeavoring to take after the guidance given on your webpage: Essay Help UK picture slider-tutorial.html I see a large portion of all that you compose, aside from point 6. The most effective method to make picture slideshow with programmed change in javascript.

You need to login to post a comment.