SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Canada
    Posts
    730
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    slide script problem

    I'm replacing the following script which is blocked /**/ with the one unblocked:
    Code:
    <!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>&nbsp;</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>
    Compare bible texts (and other tools):
    TheWheelofGod

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,329
    Mentioned
    191 Post(s)
    Tagged
    4 Thread(s)
    Do you have a question to ask? Is there a specific error that has plagued you? Are you looking for confirmation on a process? Are you thirsty?
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Canada
    Posts
    730
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looking at:
    Code:
    /*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"]));
    I want to make the 3 pictured page into 4. But that means I have to change the URLs, images, and descriptions. I did and the 4th image wasn't showing and the buttons are disappearing from the page.

    /**/ has the desired result and the unblocked part has the template.
    Compare bible texts (and other tools):
    TheWheelofGod

  4. #4
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Canada
    Posts
    730
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes. The question is HOW TO MAKE IT WORK?

    TO be more specific, how to replace

    Code:
    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"]));
    With:

    Code:
    /*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"]));*/
    And make it work, because it ain't workin' properly.
    Compare bible texts (and other tools):
    TheWheelofGod

  5. #5
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    they both work for me

  6. #6
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Canada
    Posts
    730
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I replaced "oImg.src = sLinkUrl + sSrcStr;" by "oImg.src = sSrcStr;" on function createImageBlock, and then I used that fourth array in createLibrary to put the thumbnails path.

    And the url of the images doesn't appear under the images.

    Code:
    <!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">&#171;</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">&#187;</span></button>
    	<br /><div>&nbsp;</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>
    Last edited by gilgalbiblewheel; Dec 6, 2007 at 21:36.
    Compare bible texts (and other tools):
    TheWheelofGod


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •