Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Aug 2004
    Location
    Sebastopol, California
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centered Text in Multi-Image Multi-Topic Slideshow

    Hi my name is Mac. I have found a really good script for slideshows, here and would like to add Text to the slides. I use both IE6 and NS7.1, and have XP Pro as Win Version. I especially like it because it supports varied image sizes and centers everything. I am a novice when it comes to javascripts.

    I will post the Script here and perhaps someone can help me! This is basically a dummy script as I will fill in the slideshows when it's working.

    <html>
    <body>


    <center>

    <table border="6" cellpadding="0" width="982" height="800" align="center"bgcolor="#F89900" cellspacing="0">
    <p>

    <a href="javascript:setslide(0)"<b>Start - Stop</b></a><br>
    <a href="javascript:setslide(1)"<b>Acadia</b></a><br>
    <a href="javascript:setslide(2)"<b>Oregon</b></a><br>
    <a href="javascript:setslide(3)"<b>California</b></a></p><br>

    <tr>
    <td valign="center" align="center">




    <script language="JavaScript1.2">


    /*Multi image slideshow script- by javascriptkit.com
    Visit JavaScript Kit (http://javascriptkit.com) for script
    Credit must stay intact for use*/

    //#1 SPECIFY number of slideshows
    var number_of_slideshows=4

    //#2 SPECIFY interval between slide (2000=2 seconds)
    var interval=5000

    //#3 SHOULD each slide be linked to a unique URL?
    var linked=1

    var slidewidth='768px'
    var slideheight='512px'

    var slideshows=new Array(number_of_slideshows)
    for (i=0; i <number_of_slideshows; i++)
    slideshows[i]=new Array()

    //#4 SPECIFY image paths of 1st slideshow
    slideshows[0][0]='http://www.geocities.com/barriewadman@sbcglobal.net/centview.gif'


    //SPECIFY image paths of 2nd slideshow (remove if number_of_slides less than 2)
    slideshows[1][0]='http://www.arcatapet.net/image/dyh01.jpg'
    slideshows[1][1]='http://www.serve.com/wizjd/pics/yosm01_m.jpg'
    slideshows[1][2]='http://www.serve.com/wizjd/parks/photo/mediumSize/Arches01.jpg'


    //SPECIFY image paths of 3rd slideshow (remove if number_of_slides less than 3)
    slideshows[2][0]='http://www.serve.com/wizjd/pics/gbas01_m.jpg'
    slideshows[2][1]='http://www.serve.com/wizjd/pics/gtet01_m.jpg'
    slideshows[2][2]='http://www.serve.com/wizjd/pics/gtet04_m.jpg'

    slideshows[3][0]='http://www.jdonohue.com/parks/photo/mediumSize/Acadia01.jpg'
    slideshows[3][1]='http://www.serve.com/wizjd/pics/yosm02_m.jpg'
    slideshows[3][2]='http://www.serve.com/wizjd/parks/photo/mediumSize/Arches01.jpg'

    //EXTEND THIS ARRAY if more than 3 slide shows

    <!--Remove the below portion if "var linked" above is set to 0-->

    var slidelinks=new Array(number_of_slideshows)
    for (i=0; i <number_of_slideshows; i++)
    slidelinks[i]=new Array()

    //#5 SPECIFY urls of 1st slideshow
    slidelinks[0][0]='http://mysite.com/car1.htm'
    slidelinks[0][1]='http://mysite.com/car2.htm'
    slidelinks[0][2]='http://mysite.com/car3.htm'


    //SPECIFY urls of 2nd slideshow (remove if number_of_slides=1)
    slidelinks[1][0]='http://mysite.com/house1.htm'
    slidelinks[1][1]='http://mysite.com/house2.htm'
    slidelinks[1][2]='http://mysite.com/house3.htm'


    //SPECIFY urls of 3rd slideshow (remove if number_of_slides less than 3)
    slidelinks[2][0]='http://mysite.com/boat1.htm'
    slidelinks[2][1]='http://mysite.com/boat2.htm'
    slidelinks[2][2]='http://mysite.com/boat3.htm'

    function clickredir(){
    window.location=slidelinks[maininc][subinc]
    }

    <!-- END removal ---------------------------------->

    var maininc=0
    var subinc=0

    if (linked)
    document.write('<a href="javascript:clickredir()"><img src="'+slideshows[0][0]+'" name="multislide" border=4></a>')
    else
    document.write('<img src="'+slideshows[0][0]+'" name="multislide">')

    function slideit(){
    subinc= (subinc<slideshows[maininc].length-1)? subinc+1: 0
    document.images.multislide.src=slideshows[maininc][subinc]
    }

    function setslide(which){
    clearInterval(runit)
    maininc=which
    subinc=0
    runit=setInterval("slideit()",interval)
    }

    runit=setInterval("slideit()",interval)

    </script>

    </td><//tr></table>
    </center>
    </body>
    </html>

    Hope Someone Can help
    Micario - Mac

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Separation of content, presentation and functionality is the key to achieving your goals:
    www.klproductions.com/klslideshow.html
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    New Coder
    Join Date
    Aug 2004
    Location
    Sebastopol, California
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Please Help with Centered Text Added to the javascript I am using

    Hi my name is Mac. I have found a really good script for slideshows, here and would like to add Text to the slides. I use both IE6 and NS7.1, and have XP Pro as Win Version. I especially like it because it supports varied image sizes and centers everything. I am a novice when it comes to javascripts.

    I will post the Script here and perhaps someone can help me! This is basically a dummy script as I will fill in the slideshows when it's working.

    <html>
    <body>


    <center>

    <table border="6" cellpadding="0" width="982" height="800" align="center"bgcolor="#F89900" cellspacing="0">
    <p>

    <a href="javascript:setslide(0)"<b>Start - Stop</b></a><br>
    <a href="javascript:setslide(1)"<b>Acadia</b></a><br>
    <a href="javascript:setslide(2)"<b>Oregon</b></a><br>
    <a href="javascript:setslide(3)"<b>California</b></a></p><br>

    <tr>
    <td valign="center" align="center">




    <script language="JavaScript1.2">


    /*Multi image slideshow script- by javascriptkit.com
    Visit JavaScript Kit (http://javascriptkit.com) for script
    Credit must stay intact for use*/

    //#1 SPECIFY number of slideshows
    var number_of_slideshows=4

    //#2 SPECIFY interval between slide (2000=2 seconds)
    var interval=5000

    //#3 SHOULD each slide be linked to a unique URL?
    var linked=1

    var slidewidth='768px'
    var slideheight='512px'

    var slideshows=new Array(number_of_slideshows)
    for (i=0; i <number_of_slideshows; i++)
    slideshows[i]=new Array()

    //#4 SPECIFY image paths of 1st slideshow
    slideshows[0][0]='http://www.geocities.com/barriewadman@sbcglobal.net/centview.gif'


    //SPECIFY image paths of 2nd slideshow (remove if number_of_slides less than 2)
    slideshows[1][0]='http://www.arcatapet.net/image/dyh01.jpg'
    slideshows[1][1]='http://www.serve.com/wizjd/pics/yosm01_m.jpg'
    slideshows[1][2]='http://www.serve.com/wizjd/parks/photo/mediumSize/Arches01.jpg'


    //SPECIFY image paths of 3rd slideshow (remove if number_of_slides less than 3)
    slideshows[2][0]='http://www.serve.com/wizjd/pics/gbas01_m.jpg'
    slideshows[2][1]='http://www.serve.com/wizjd/pics/gtet01_m.jpg'
    slideshows[2][2]='http://www.serve.com/wizjd/pics/gtet04_m.jpg'

    slideshows[3][0]='http://www.jdonohue.com/parks/photo/mediumSize/Acadia01.jpg'
    slideshows[3][1]='http://www.serve.com/wizjd/pics/yosm02_m.jpg'
    slideshows[3][2]='http://www.serve.com/wizjd/parks/photo/mediumSize/Arches01.jpg'

    //EXTEND THIS ARRAY if more than 3 slide shows

    <!--Remove the below portion if "var linked" above is set to 0-->

    var slidelinks=new Array(number_of_slideshows)
    for (i=0; i <number_of_slideshows; i++)
    slidelinks[i]=new Array()

    //#5 SPECIFY urls of 1st slideshow
    slidelinks[0][0]='http://mysite.com/car1.htm'
    slidelinks[0][1]='http://mysite.com/car2.htm'
    slidelinks[0][2]='http://mysite.com/car3.htm'


    //SPECIFY urls of 2nd slideshow (remove if number_of_slides=1)
    slidelinks[1][0]='http://mysite.com/house1.htm'
    slidelinks[1][1]='http://mysite.com/house2.htm'
    slidelinks[1][2]='http://mysite.com/house3.htm'


    //SPECIFY urls of 3rd slideshow (remove if number_of_slides less than 3)
    slidelinks[2][0]='http://mysite.com/boat1.htm'
    slidelinks[2][1]='http://mysite.com/boat2.htm'
    slidelinks[2][2]='http://mysite.com/boat3.htm'

    function clickredir(){
    window.location=slidelinks[maininc][subinc]
    }

    <!-- END removal ---------------------------------->

    var maininc=0
    var subinc=0

    if (linked)
    document.write('<a href="javascript:clickredir()"><img src="'+slideshows[0][0]+'" name="multislide" border=4></a>')
    else
    document.write('<img src="'+slideshows[0][0]+'" name="multislide">')

    function slideit(){
    subinc= (subinc<slideshows[maininc].length-1)? subinc+1: 0
    document.images.multislide.src=slideshows[maininc][subinc]
    }

    function setslide(which){
    clearInterval(runit)
    maininc=which
    subinc=0
    runit=setInterval("slideit()",interval)
    }

    runit=setInterval("slideit()",interval)

    </script>

    </td><//tr></table>
    </center>
    </body>
    </html>

    Hope Someone Can help
    Micario - Mac

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Micario
    Please Help with Centered Text Added to the javascript I am using
    Does the reposting of your script mean that you are not willing to consider alternative scripts which may already have the functionality you are looking for?

    If you are insisting on only using the script that you posted, I can only suggst that you attempt to make the necassary changes yourself and when/if you run into problems, post your codes and seek further direction....

    But I agree with Vladdy and I also have numerous slides shows with the functionality that you desire but if you are stuck on that script....

    .....Willy

  • #5
    New Coder
    Join Date
    Aug 2004
    Location
    Sebastopol, California
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    As Regards Javascript with centered Text

    Thanks for the reply Vlady and Willy.

    I checked your page Vlady, and it looks like a good program, however I didn't see a capability for multiple slideshows, although it probably has that function.

    I am not locked into this script and in fact am looking at several, none of which do everything I want. And I am learning to write javascript routines, although at my age it's slow going.

    I have also been around computers and the net long enough to know that I can do most things for free if I'm willing to look. I will continue to look as my experience with these forums, is someone has usually done what I'm trying to do.

    I offer my help to those that ask if I can, and shoes seem to fit on my foot also.

    That isn't to say that I won't invest in modules and/or programs because at times I of course do. However in this case, by subscribing to several forums and experimenting with the free routines I find I should eventually solve my problems. I don't intend to invent the wheel, but there are a lot of wheels out there. If I can't find one I'll be back as our gov Arnold says.

    I am writing a series of pages for a subscription service for travelers on the road and slideshows are a very small part of that. I also intend for folks to be able to enter and view there own slideshows, so that they can share their trips with each other, while maintaining audio-visual chat. So in the meantime I'm writing scripts in several languages and my web pages will eventually be a total program.

    Again thanks for your input and I will keep your programs in mind.

    Again I am trying to write Multi-Slideshows, with Multi Variable size centered images that I can have a maxheight/maxwidth and centered text above or below the image. Also the images will be taken from the web rather than stored, with reference and permission to the sites they are taken from. So that I do not have to store or modify the images. They will also display in a table or frame on the initial page rather than a new one.

    Note: I also test all my pages with IE, NS, Opera and Firefox the latest versions thereof. I have tested a routine that has various change effects that work in all browsers except in NS the effects do not display. However in that script I cannot center within the table or frame.

    Also keep in mind that my folks will be having an audio-chat using the control key for input, while viewing the slides, so that the slides are-preloaded and do not slow down the chat which is on another page.

    Mac
    Last edited by Micario; 08-16-2004 at 05:18 PM.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Micario
    <snip />

    I checked your page Vlady, and it looks like a good program, however I didn't see a capability for multiple slideshows, although it probably has that function.
    <snip />
    I guess you have not paid much attention. Slide 4 on that page states that ability to have multiple slideshows is one of the advantages of OOP design and demonstrates a second nested slideshow.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #7
    New Coder
    Join Date
    Jul 2003
    Location
    U.S.A. Pacific N.W.
    Posts
    56
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Some suggestions

    Hi Mac,

    If you're willing to use CSS-P for the page layout and a different script to run the slideshow, this might be a solution. You can adjust the timing for each *screen*. You can also layer new <div>'s over each of the screens and add your text - there might be an inner html script out there you can modify so that the text changes with each image change. Otherwise, you can add the text directly to the images using Photoshop or any other image editing software. Or create the text as separate images and run them on additional screens.

    Hope this helps!
    robsta


    Here's the code if you want to give this a try »

    Code:
    <html>
    <head>
    <meta name="linked-style-sheet-name" content="Embedded style sheet">
    <meta name="window-location" content="{ 45 -5 556 792 }">
    <meta name="targetted-browsers" content="NS4.0 NS6 IE4.0 IE5">
    <title>MultiWindowSlideshow - Test</title>
    <style type="text/css">
    body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    width: 760 px;
    margin: 0 auto;
    background-color: #deddbf; }
    
    #pic1 { position: absolute;
    top: 50px;
    left: 45px;
    width: 222px;
    height: 149px;
    z-index: 2; }
    
    #pic2 { position: absolute;
    top: 50px;
    left: 269px;
    width: 222px;
    height: 149px;
    z-index: 3; }
    
    #pic3 { position: absolute;
    top: 50px;
    left: 494px;
    width: 222px;
    height: 149px;
    z-index: 4; }
    
    #frame { position: absolute;
    top: 24px;
    left: 19px;
    width: 723px;
    height: 201px;
    z-index: 1;
    background-color: #000000; }
    </style>
    
    <script language="JavaScript">
    <!-- Original: CodeLifter.com (support@codelifter.com) -->
    <!-- Web Site: http://www.codelifter.com -->
    
    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->
    
    <!-- This is a MODIFIED VERSION (with due respect to the author) -->
    <!-- Made it Object-Oriented to run multiple slideshows -->
    
    <!-- Begin
    
    function SlideShow(imgName,speed,duration){	
    	var p; //length of Pic array
    	var j = 0;		
    	var slide = imgName;
    	// Set slideShowSpeed (milliseconds)
    	var slideShowSpeed = speed;
    	// Duration of crossfade (seconds)
    	var crossFadeDuration = duration;
    	var Pic = new Array();
    	this.timer = null;
    	this.setPics = function(){
    		var preLoad = new Array();
    		//set pics and preload
    		for (var i=0;i<arguments.length;i++){
    			Pic[i] = arguments[i];
    			preLoad[i] = new Image();
    			preLoad[i].src = Pic[i];
    		}
    		p = Pic.length;
    	}
    	this.runSlideShow = function(varName){
    		var t;
    		if (document.all) {
    			document.images[slide].style.filter="blendTrans(duration=3)";
    			document.images[slide].style.filter="blendTrans(duration=crossFadeDuration)";
    			document.images[slide].filters.blendTrans.Apply();
    		}
    		document.images[slide].src = Pic[j];
    		if (document.all) {
    			document.images[slide].filters.blendTrans.Play();
    		}
    		j = j + 1;
    		if (j > (p - 1)) j = 0;
    		this.timer = setTimeout(varName+".runSlideShow('"+varName+"')", slideShowSpeed);
    		
    	}
    	this.stopSlideShow = function(){
    		if (this.timer) clearTimeout(this.timer);
    	}
    }
    //end script
    
    //sample usage
    var slide1 = new SlideShow('SlideShow1',2000,30);
    slide1.setPics("imgs/slideblank.jpg","imgs/image1.jpg","imgs/image1.jpg","imgs/image1.jpg","imgs/image1.jpg","imgs/slideblank.jpg","imgs/slideblank.jpg","imgs/slideblank.jpg","imgs/slideblank.jpg","imgs/text3.jpg","imgs/text3.jpg","imgs/slideblank.jpg","imgs/slideblank.jpg");
    
    var slide2 = new SlideShow('SlideShow2',2000,30);
    slide2.setPics("imgs/slideblank.jpg","imgs/slideblank.jpg","imgs/image2.jpg","imgs/image2.jpg","imgs/slideblank.jpg","imgs/slideblank.jpg","imgs/slideblank.jpg","imgs/text2.jpg","imgs/text2.jpg","imgs/text2.jpg","imgs/image2.jpg","imgs/image2.jpg","imgs/image2.jpg");
    
    var slide3 = new SlideShow('SlideShow3',2000,30);
    slide3.setPics("imgs/slideblank.jpg","imgs/slideblank.jpg","imgs/slideblank.jpg","imgs/image3.jpg","imgs/image3.jpg","imgs/image3.jpg","imgs/slideblank.jpg","imgs/slideblank.jpg","imgs/text3.jpg","imgs/text3.jpg","imgs/text3.jpg","imgs/text3.jpg","imgs/slideblank.jpg");
    
    //if you want to start slideshows onload
    /*window.onload = function(){
    	slide1.runSlideShow('slide1');
    	slide2.runSlideShow('slide2');
    	slide3.runSlideShow('slide3');
    }*/
    
    // End -->
    </script>
    
    </head>
    <body onLoad="slide1.runSlideShow('slide1');slide2.runSlideShow('slide2');slide3.runSlideShow('slide3')">
    <div style="position: absolute; left:50%; width: 760px; height: 390px; margin-left:-380px;">
    
    <div id="frame"></div>
    
    <div id="pic1"><img name="SlideShow1" src="imgs/slideblank.jpg" width="222" height="149"></div>
    
    <div id="pic2"><img name="SlideShow2" src="imgs/slideblank.jpg" width="222" height="149"></div>
    
    <div id="pic3"><img name="SlideShow3" src="imgs/slideblank.jpg" width="222" height="149"></div>
    
    </div>
    </body>
    </html>

  • #8
    New Coder
    Join Date
    Aug 2004
    Location
    Sebastopol, California
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks robsta

    I am pretty much a novice as to javascript & CSS. I am going to play with the script to see what it can do. I'm using photos off the web so don't want to edit them.

    I just want to add a centered text description and limit the height-width of the image so as to fit in a table

    I'm in Northern Cal but spent much time in Washington, specifically the Olympic Peninsula and Just East of Lake Washington. I was reading your profile.

    I will email you a couple of my pages so you can see what I'm trying to do

    Travelin Mac


  •  

    Posting Permissions

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