I'm replacing the following script which is blocked /**/ with the one unblocked: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript Slideshow Script Version 1</title> <!-- Author: gilgalbiblewheel --> <meta name="description" content="JavaScript Image slideshow version 1" /> <meta name="keywords" content="Image,slideshow,script" /> <meta name="author" content="gilgalbiblewheel" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <base href="http://" /> <script type="text/javascript"> //<![CDATA[ var t_out = 0 function createImageBlock(iWidth, iHeight, sAlt, sSrcStr, sLinkUrl, sLinkTitle, sLinkText){ var oImg = new Image(iWidth, iHeight); oImg.alt = sAlt; oImg.src = sLinkUrl + sSrcStr; oImg.className = "slide_image"; var a = document.createElement("a"); a.href = sLinkUrl; a.title = sLinkTitle; a.appendChild(document.createTextNode(sLinkText)); var br = document.createElement("br"); var container = document.createElement("div"); container.id = "slide"; container.appendChild(oImg); container.appendChild(br); container.appendChild(a); return container; } function createLibrary(aiWidth, aiHeight, asAlt, asSrcStr, asLinkUrl, asLinkTitle, asLinkText){ var oImg = {}; for(var i = 0;i < aiWidth.length;i++){ oImg[i] = createImageBlock(aiWidth[i], aiHeight[i], asAlt[i], asSrcStr[i], asLinkUrl[i], asLinkTitle[i], asLinkText[i]); } return oImg; } function imgLibrary(iTotal_Images, bRandom_display, oImgs){ this.target = ""; this.targetBefore = ""; this.total_Images = iTotal_Images; this.random_display = bRandom_display; this.imgs = oImgs; this.currentObj = oImgs[0] this.currentImg = -1; this.getPrevImage = function() { this.currentImg = this.currentImg > 0 ? this.currentImg - 1 : this.total_Images - 1; return this.imgs[this.currentImg]; } this.prevImage = function() { this.clearDecks(); this.currentObj = this.getPrevImage(); this.target.insertBefore(this.currentObj,this.targetBefore) } this.nextImage = function() { this.clearDecks(); this.currentImg = this.currentImg < (this.total_Images - 1) ? this.currentImg + 1 : 0; this.currentObj = this.imgs[this.currentImg]; this.target.insertBefore(this.currentObj,this.targetBefore) } this.clearDecks = function(){ this.target.removeChild(this.target.lastChild.previousSibling); } } function slideShow(oObj) { oObj.clearDecks(); oObj.currentImg = oObj.currentImg < (oObj.total_Images - 1) ? oObj.currentImg + 1 : 0; oObj.currentObj = oObj.imgs[oObj.currentImg]; oObj.target.insertBefore(oObj.currentObj,oObj.targetBefore) } /*var lib1 = new imgLibrary(4, true, createLibrary([96, 128, 96], [128, 96, 128], ["Robot Mode", "Vehicle mode", "Spare Parts", "Mixmaster Weapon"], ["", "", "", ""], ["img209.imageshack.us/my.php?image=hpnx0843yw9.jpg", "http://img209.imageshack.us/my.php?image=hpnx0841bb4.jpg", "http://img523.imageshack.us/my.php?image=hpnx0844kk9.jpg", "http://img86.imageshack.us/my.php?image=hpnx0867yt9.jpg"], ["Click for the full size of the picture", "Click for the full size of the picture", "Click for the full size of the picture", "Click for the full size of the picture"], ["Robot Mode", "Vehicle mode", "Spare Parts", "Mixmaster Weapon"]));*/ var lib1 = new imgLibrary(3, true, createLibrary([96, 128, 96], [128, 96, 128], ["Jetfire jet mode", "Jetfire robot mode", "Under the jet"], ["", "", ""], ["img229.imageshack.us/img229/7334/hpnx0853gq5.jpg", "img150.imageshack.us/img150/474/hpnx0857wy0.jpg", "img444.imageshack.us/img444/845/hpnx0858qt4.jpg"], ["Click for the full size of the picture", "Click for the full size of the picture", "Click for the full size of the picture"], ["Jetfire jet mode", "Jetfire robot mode", "Under the jet"])); onload = function(){ lib1.target = document.getElementById("o_Slide_nav") lib1.targetBefore = document.getElementById("oLast"); t_out = setInterval("slideShow(lib1)",1500); } //]]> </script> <style type="text/css"> /*<![CDATA[*/ body{ background-color:#ffffff; } .slide_nav{ position: absolute; top: 40px; left: 200px; font-family:verdana, helvetica, serif; font-size:0.7em; text-align:center; margin:10px 0; width: 500px; height: 300px; background-color:#CCCCCC; } span.bold{ font-weight:bold; } .larger{ font-size:1.4em; } .slide_nav button{ width:50px; } .slide_caption{ text-align:center; } .slide_image{ margin:10px 0; text-align:center; } .slide_image img{ width:500px; height:375px; border:1px solid #FF0000; } .slide_caption a{ font-family:verdana, helvetica, serif; font-size:0.7em; } #other_auctions { position: absolute; top: 500px; left: 200px; } /*]]>*/ </style> </head> <body> <div id="o_Slide_nav" class="slide_nav"> <br /><br /> <button onclick="lib1.prevImage();" title="previous"><span class="bold larger">«</span></button> <button onclick="t_out = setInterval('slideShow(lib1)',1500);" title="play"><span class="bold">Play</span></button> <button onclick="clearTimeout(t_out)" title="pause"><span class="bold">||</span></button> <button onclick="lib1.nextImage();" title="next"><span class="bold larger">»</span></button> <br /><div> </div><br id="oLast" /></div> <div id="other_auctions"> <span class="bold" style="text-align: center;">Take a look at my other auctions</span><br /><br /> <a href="http://img150.imageshack.us/my.php?image=hpnx0857wy0.jpg" target="_blank"><img src="http://img150.imageshack.us/img150/474/hpnx0857wy0.th.jpg" border="0"/></a> <a href="http://img401.imageshack.us/my.php?image=hpnx0859zc9.jpg" target="_blank"><img src="http://img401.imageshack.us/img401/6462/hpnx0859zc9.th.jpg" border="0"/></a> <a href="http://img265.imageshack.us/my.php?image=hpnx0864ay5.jpg" target="_blank"><img src="http://img265.imageshack.us/img265/2434/hpnx0864ay5.th.jpg" border="0"/></a> <a href="http://img209.imageshack.us/my.php?image=hpnx0841bb4.jpg" target="_blank"><img src="http://img209.imageshack.us/img209/5346/hpnx0841bb4.th.jpg" border="0"/></a> </div> </body> </html> Code (markup):
Can you be a bit more descriptive? Also, your code it's not very understandable, there's a lack of indentation and some comments would be helpful to.
Yes. The question is HOW TO MAKE IT WORK? TO be more specific, how to replace var lib1 = new imgLibrary(3, true, createLibrary([96, 128, 96], [128, 96, 128], ["Jetfire jet mode", "Jetfire robot mode", "Under the jet"], ["", "", ""], ["img229.imageshack.us/img229/7334/hpnx0853gq5.jpg", "img150.imageshack.us/img150/474/hpnx0857wy0.jpg", "img444.imageshack.us/img444/845/hpnx0858qt4.jpg"], ["Click for the full size of the picture", "Click for the full size of the picture", "Click for the full size of the picture"], ["Jetfire jet mode", "Jetfire robot mode", "Under the jet"])); Code (markup): With: /*var lib1 = new imgLibrary(4, true, createLibrary([96, 128, 96], [128, 96, 128], ["Robot Mode", "Vehicle mode", "Spare Parts", "Mixmaster Weapon"], ["", "", "", ""], ["img209.imageshack.us/my.php?image=hpnx0843yw9.jpg", "http://img209.imageshack.us/my.php?image=hpnx0841bb4.jpg", "http://img523.imageshack.us/my.php?image=hpnx0844kk9.jpg", "http://img86.imageshack.us/my.php?image=hpnx0867yt9.jpg"], ["Click for the full size of the picture", "Click for the full size of the picture", "Click for the full size of the picture", "Click for the full size of the picture"], ["Robot Mode", "Vehicle mode", "Spare Parts", "Mixmaster Weapon"]));*/ Code (markup): And make it work, because it ain't workin' properly.
Hum, taking a quick look at it, i can guess that on «var lib1 = new imgLibrary(3, true,», the 3 represents the number of elements in the arrays, but on the commented code block, you have «var lib1 = new imgLibrary(4, true,», with a 4, but you have arrays with a lenght of 3... Maybe there's the problem.
The reason it didn't work was that the measurement of the 4th picture missing. Thanks. But I wonder why some of the pictures distorted even if I left the thumbnail's original measurements? var lib1 = new imgLibrary(4, true, createLibrary([128, 150, 128, [B]150[/B]], [150, 128, 150, [B]128[/B]], ["Robot Mode", "Vehicle mode", "Spare Parts", "Mixmaster Weapon"], ["", "", "", ""], ["imgcash4.imageshack.us/img209/6656/hpnx0843yw9.th.jpg", "imgcash4.imageshack.us/img209/5346/hpnx0841bb4.th.jpg", "imgcash4.imageshack.us/img523/2908/hpnx0844kk9.th.jpg", "imgcash6.imageshack.us/img86/3185/hpnx0867yt9.th.jpg"], ["Click for the full size of the picture", "Click for the full size of the picture", "Click for the full size of the picture", "Click for the full size of the picture"], ["Robot Mode", "Vehicle mode", "Spare Parts", "Mixmaster Weapon"])); Code (markup): The entire script: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript Slideshow Script Version 1</title> <!-- Author: gilgalbiblewheel --> <meta name="description" content="JavaScript Image slideshow version 1" /> <meta name="keywords" content="Image,slideshow,script" /> <meta name="author" content="gilgalbiblewheel" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <base href="http://" /> <script type="text/javascript"> //<![CDATA[ var t_out = 0 function createImageBlock(iWidth, iHeight, sAlt, sSrcStr, sLinkUrl, sLinkTitle, sLinkText){ var oImg = new Image(iWidth, iHeight); oImg.alt = sAlt; oImg.src = sLinkUrl + sSrcStr; oImg.className = "slide_image"; var a = document.createElement("a"); a.href = sLinkUrl; a.title = sLinkTitle; a.appendChild(document.createTextNode(sLinkText)); var br = document.createElement("br"); var container = document.createElement("div"); container.id = "slide"; container.appendChild(oImg); container.appendChild(br); container.appendChild(a); return container; } function createLibrary(aiWidth, aiHeight, asAlt, asSrcStr, asLinkUrl, asLinkTitle, asLinkText){ var oImg = {}; for(var i = 0;i < aiWidth.length;i++){ oImg[i] = createImageBlock(aiWidth[i], aiHeight[i], asAlt[i], asSrcStr[i], asLinkUrl[i], asLinkTitle[i], asLinkText[i]); } return oImg; } function imgLibrary(iTotal_Images, bRandom_display, oImgs){ this.target = ""; this.targetBefore = ""; this.total_Images = iTotal_Images; this.random_display = bRandom_display; this.imgs = oImgs; this.currentObj = oImgs[0] this.currentImg = -1; this.getPrevImage = function() { this.currentImg = this.currentImg > 0 ? this.currentImg - 1 : this.total_Images - 1; return this.imgs[this.currentImg]; } this.prevImage = function() { this.clearDecks(); this.currentObj = this.getPrevImage(); this.target.insertBefore(this.currentObj,this.targetBefore) } this.nextImage = function() { this.clearDecks(); this.currentImg = this.currentImg < (this.total_Images - 1) ? this.currentImg + 1 : 0; this.currentObj = this.imgs[this.currentImg]; this.target.insertBefore(this.currentObj,this.targetBefore) } this.clearDecks = function(){ this.target.removeChild(this.target.lastChild.previousSibling); } } function slideShow(oObj) { oObj.clearDecks(); oObj.currentImg = oObj.currentImg < (oObj.total_Images - 1) ? oObj.currentImg + 1 : 0; oObj.currentObj = oObj.imgs[oObj.currentImg]; oObj.target.insertBefore(oObj.currentObj,oObj.targetBefore) } var lib1 = new imgLibrary(4, true, createLibrary([128, 150, 128, 150], [150, 128, 150, 128], ["Robot Mode", "Vehicle mode", "Spare Parts", "Mixmaster Weapon"], ["", "", "", ""], ["imgcash4.imageshack.us/img209/6656/hpnx0843yw9.th.jpg", "imgcash4.imageshack.us/img209/5346/hpnx0841bb4.th.jpg", "imgcash4.imageshack.us/img523/2908/hpnx0844kk9.th.jpg", "imgcash6.imageshack.us/img86/3185/hpnx0867yt9.th.jpg"], ["Click for the full size of the picture", "Click for the full size of the picture", "Click for the full size of the picture", "Click for the full size of the picture"], ["Robot Mode", "Vehicle mode", "Spare Parts", "Mixmaster Weapon"])); onload = function(){ lib1.target = document.getElementById("o_Slide_nav") lib1.targetBefore = document.getElementById("oLast"); t_out = setInterval("slideShow(lib1)",1500); } //]]> </script> <style type="text/css"> /*<![CDATA[*/ body{ background-color:#ffffff; } .slide_nav{ position: absolute; top: 40px; left: 200px; font-family:verdana, helvetica, serif; font-size:0.7em; text-align:center; margin:10px 0; width: 500px; height: 300px; background-color:#CCCCCC; } span.bold{ font-weight:bold; } .larger{ font-size:1.4em; } .slide_nav button{ width:50px; } .slide_caption{ text-align:center; } .slide_image{ margin:10px 0; text-align:center; } .slide_image img{ width:500px; height:375px; border:1px solid #FF0000; } .slide_caption a{ font-family:verdana, helvetica, serif; font-size:0.7em; } #other_auctions { position: absolute; top: 500px; left: 200px; } /*]]>*/ </style> </head> <body> <div id="o_Slide_nav" class="slide_nav"> <br /><br /> <button onclick="lib1.prevImage();" title="previous"><span class="bold larger">«</span></button> <button onclick="t_out = setInterval('slideShow(lib1)',1500);" title="play"><span class="bold">Play</span></button> <button onclick="clearTimeout(t_out)" title="pause"><span class="bold">||</span></button> <button onclick="lib1.nextImage();" title="next"><span class="bold larger">»</span></button> <br /><div> </div><br id="oLast" /></div> <div id="other_auctions"> <span class="bold" style="text-align: center;">Take a look at my other auctions</span><br /><br /> <a href="http://img150.imageshack.us/my.php?image=hpnx0857wy0.jpg" target="_blank"><img src="http://img150.imageshack.us/img150/474/hpnx0857wy0.th.jpg" border="0"/></a> <a href="http://img401.imageshack.us/my.php?image=hpnx0859zc9.jpg" target="_blank"><img src="http://img401.imageshack.us/img401/6462/hpnx0859zc9.th.jpg" border="0"/></a> <a href="http://img265.imageshack.us/my.php?image=hpnx0864ay5.jpg" target="_blank"><img src="http://img265.imageshack.us/img265/2434/hpnx0864ay5.th.jpg" border="0"/></a> <a href="http://img209.imageshack.us/my.php?image=hpnx0841bb4.jpg" target="_blank"><img src="http://img209.imageshack.us/img209/5346/hpnx0841bb4.th.jpg" border="0"/></a> </div> </body> </html> Code (markup):
That's probably a problem with your style elements. Try to load the page without the style elements and see if the pictures appear ok.
ok I pasted the thumbnail versions of the pictures but the link under has to be the original. I'm not sure where I should add the url of the original pics because it's opening the thumbnail versions.
Hum... taking a look to the script, it doesn't look to make any difference between what is a thumbnail and the full image. I have tweaked the code a bit to make it work the way you want. on function createImageBlock, replace "oImg.src = sLinkUrl + sSrcStr;" by "oImg.src = sSrcStr;", and then use that fourth array in createLibrary, the one you have filled in with only empty strings, to put the thumbnails path.
So let me get this straight. This will both display the thumbnail in the slide and once clicked ( the link ) it will open the full image right?
Howcome it's not working? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript Slideshow Script Version 1</title> <!-- Author: gilgalbiblewheel --> <meta name="description" content="JavaScript Image slideshow version 1" /> <meta name="keywords" content="Image,slideshow,script" /> <meta name="author" content="gilgalbiblewheel" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <base href="http://" /> <script type="text/javascript"> //<![CDATA[ var t_out = 0 function createImageBlock(iWidth, iHeight, sAlt, sSrcStr, sLinkUrl, sLinkTitle, sLinkText){ var oImg = new Image(iWidth, iHeight); oImg.alt = sAlt; oImg.src = sLinkUrl + sSrcStr; oImg.className = "slide_image"; var a = document.createElement("a"); a.href = sLinkUrl; a.title = sLinkTitle; a.appendChild(document.createTextNode(sLinkText)); var br = document.createElement("br"); var container = document.createElement("div"); container.id = "slide"; container.appendChild(oImg); container.appendChild(br); container.appendChild(a); return container; } function createLibrary(aiWidth, aiHeight, asAlt, asSrcStr, asLinkUrl, asLinkTitle, asLinkText){ var oImg = {}; for(var i = 0;i < aiWidth.length;i++){ oImg[i] = createImageBlock(aiWidth[i], aiHeight[i], asAlt[i], asSrcStr[i], asLinkUrl[i], asLinkTitle[i], asLinkText[i]); } return oImg; } function imgLibrary(iTotal_Images, bRandom_display, oImgs){ this.target = ""; this.targetBefore = ""; this.total_Images = iTotal_Images; this.random_display = bRandom_display; this.imgs = oImgs; this.currentObj = oImgs[0] this.currentImg = -1; this.getPrevImage = function() { this.currentImg = this.currentImg > 0 ? this.currentImg - 1 : this.total_Images - 1; return this.imgs[this.currentImg]; } this.prevImage = function() { this.clearDecks(); this.currentObj = this.getPrevImage(); this.target.insertBefore(this.currentObj,this.targetBefore) } this.nextImage = function() { this.clearDecks(); this.currentImg = this.currentImg < (this.total_Images - 1) ? this.currentImg + 1 : 0; this.currentObj = this.imgs[this.currentImg]; this.target.insertBefore(this.currentObj,this.targetBefore) } this.clearDecks = function(){ this.target.removeChild(this.target.lastChild.previousSibling); } } function slideShow(oObj) { oObj.clearDecks(); oObj.currentImg = oObj.currentImg < (oObj.total_Images - 1) ? oObj.currentImg + 1 : 0; oObj.currentObj = oObj.imgs[oObj.currentImg]; oObj.target.insertBefore(oObj.currentObj,oObj.targetBefore) } var lib1 = new imgLibrary(4, true, createLibrary([150, 150, 150, 150], [128, 150, 128, 150], ["Robot Mode", "Vehicle mode", "Spare Parts", "Mixmaster Weapon"], ["imgcash4.imageshack.us/img209/6656/hpnx0843yw9.th.jpg", "imgcash4.imageshack.us/img209/5346/hpnx0841bb4.th.jpg", "imgcash4.imageshack.us/img523/2908/hpnx0844kk9.th.jpg", "imgcash6.imageshack.us/img86/3185/hpnx0867yt9.th.jpg"], ["", "", "", ""], /*["img209.imageshack.us/img209/6656/hpnx0843yw9.jpg", "img209.imageshack.us/img209/5346/hpnx0841bb4.jpg", "img523.imageshack.us/img523/2908/hpnx0844kk9.jpg", "img86.imageshack.us/img86/3185/hpnx0867yt9.jpg"]*/ ["Click for the full size of the picture", "Click for the full size of the picture", "Click for the full size of the picture", "Click for the full size of the picture"], ["Robot Mode", "Vehicle mode", "Spare Parts", "Mixmaster Weapon"])); onload = function(){ lib1.target = document.getElementById("o_Slide_nav") lib1.targetBefore = document.getElementById("oLast"); t_out = setInterval("slideShow(lib1)",1500); } //]]> </script> <style type="text/css"> /*<![CDATA[*/ body{ background-color:#ffffff; } .slide_nav{ position: absolute; top: 40px; left: 200px; font-family:verdana, helvetica, serif; font-size:0.7em; text-align:center; margin:10px 0; width: 500px; height: 300px; background-color:#CCCCCC; } span.bold{ font-weight:bold; } .larger{ font-size:1.4em; } .slide_nav button{ width:50px; } .slide_caption{ text-align:center; } .slide_image{ margin:10px 0; text-align:center; } .slide_image img{ width:500px; height:375px; border:1px solid #FF0000; } .slide_caption a{ font-family:verdana, helvetica, serif; font-size:0.7em; } #other_auctions { position: absolute; top: 500px; left: 200px; } /*]]>*/ </style> </head> <body> <div id="o_Slide_nav" class="slide_nav"> <br /><br /> <button onclick="lib1.prevImage();" title="previous"><span class="bold larger">«</span></button> <button onclick="t_out = setInterval('slideShow(lib1)',1500);" title="play"><span class="bold">Play</span></button> <button onclick="clearTimeout(t_out)" title="pause"><span class="bold">||</span></button> <button onclick="lib1.nextImage();" title="next"><span class="bold larger">»</span></button> <br /><div> </div><br id="oLast" /></div> <div id="other_auctions"> <span class="bold" style="text-align: center;">Take a look at my other auctions</span><br /><br /> <a href="http://img150.imageshack.us/my.php?image=hpnx0857wy0.jpg" target="_blank"><img src="http://img150.imageshack.us/img150/474/hpnx0857wy0.th.jpg" border="0"/></a> <a href="http://img401.imageshack.us/my.php?image=hpnx0859zc9.jpg" target="_blank"><img src="http://img401.imageshack.us/img401/6462/hpnx0859zc9.th.jpg" border="0"/></a> <a href="http://img265.imageshack.us/my.php?image=hpnx0864ay5.jpg" target="_blank"><img src="http://img265.imageshack.us/img265/2434/hpnx0864ay5.th.jpg" border="0"/></a> <a href="http://img209.imageshack.us/my.php?image=hpnx0841bb4.jpg" target="_blank"><img src="http://img209.imageshack.us/img209/5346/hpnx0841bb4.th.jpg" border="0"/></a> </div> </body> </html> Code (markup):