SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2002
    Location
    Scotland, UK
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slideshow script problem

    Hi,

    I run a site that includes weekly galleries :

    http://www.strathycruise.com/cruise

    People can click on the thumbnail to popup a window with the larger image.

    I also have a little postcard script I created running that can send out images via email if people wish to do so and the code is dynamically created inside the popup when clicked from the main gallery page :

    eg: http://www.strathycruise.com/postcar.../cruise-02.jpg

    This all works fine but Ive now created a little slideshow script in Javascript and cant figure out how to place it in the little popup window and still be able to link to the postcard sender.

    Using Next and Prev links I change the .src of the image so it appears onscreen without reloading the entire page but how so I also mirror the different image filename in the "Send a postcard" link.

    Here is the simple slideshow I've created :

    [VBS]
    <html>
    <head>
    <SCRIPT LANGUAGE='JavaScript'>

    currentslide=1;
    maxslides=99;

    function prevSlide() {

    if(document.images) {
    currentslide--;
    if(currentslide<1) currentslide=maxslides;
    if(currentslide==1) document.images['slide'].src='cruise-01.jpg';
    if(currentslide==2) document.images['slide'].src='cruise-02.jpg';
    if(currentslide==3) document.images['slide'].src='cruise-03.jpg';
    if(currentslide==4) document.images['slide'].src='cruise-04.jpg';
    if(currentslide==5) document.images['slide'].src='cruise-05.jpg';
    if(currentslide==6) document.images['slide'].src='cruise-06.jpg';
    if(currentslide==7) document.images['slide'].src='cruise-07.jpg';
    if(currentslide==8) document.images['slide'].src='cruise-08.jpg';
    if(currentslide==9) document.images['slide'].src='cruise-09.jpg';
    if(currentslide>9) document.images['slide'].src='cruise-' + currentslide + '.jpg';
    }
    }


    function nextSlide() {

    if(document.images) {
    currentslide++;
    if(currentslide>maxslides) currentslide=1;
    if(currentslide==1) document.images['slide'].src='cruise-01.jpg';
    if(currentslide==2) document.images['slide'].src='cruise-02.jpg';
    if(currentslide==3) document.images['slide'].src='cruise-03.jpg';
    if(currentslide==4) document.images['slide'].src='cruise-04.jpg';
    if(currentslide==5) document.images['slide'].src='cruise-05.jpg';
    if(currentslide==6) document.images['slide'].src='cruise-06.jpg';
    if(currentslide==7) document.images['slide'].src='cruise-07.jpg';
    if(currentslide==8) document.images['slide'].src='cruise-08.jpg';
    if(currentslide==9) document.images['slide'].src='cruise-09.jpg';
    if(currentslide>9) document.images['slide'].src='cruise-' + currentslide + '.jpg';
    }
    }

    </SCRIPT>
    </head>

    <body topmargin='0' leftmargin='0' vlink='#0000FF'>

    <img name='slide' width=640 height=480 border=0 hspace=0 vspace=0 src='cruise-01.jpg'>
    <a href='javascriptrevSlide()'>Prev</a>
    <a href='javascript:nextSlide()'>Next</a>
    </body>
    </html>[/VBS]

    Im not making myself clear but what I would like is when another image is selected via the next/prev links on the popup the link to the postcard script also changes to reflect the new image displayed :

    eg: http://www.strathycruise.com/postcar.../cruise-02.jpg

    becomes

    http://www.strathycruise.com/postcar.../cruise-03.jpg

    and so on...

    Thanks

  2. #2
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is something that might help a bit. I changed the less than 10 numbers to a bit cleaner and I also made the link thing work in a way. I hope this helps.

    Code:
    <html>
    <head>
    <SCRIPT LANGUAGE='JavaScript'>
    function padout(number){return (number<10)?'0'+number:number;}
    
    currentslide=1;
    maxslides=99;
    
    function prevSlide() {
    	if(document.images) {
    		currentslide--;
    		if(currentslide<1) currentslide=maxslides;
    		document.images['slide'].src='cruise-' + padout(currentslide) + '.jpg';
    	}
    }
    
    function nextSlide() {
    	if(document.images) {
    		currentslide++;
    		if(currentslide>maxslides) currentslide=1;
    		document.images['slide'].src='cruise-' + padout(currentslide) + '.jpg';
    	}
    }
    
    </SCRIPT>
    </head>
    
    <BODY background='xbackground.jpg' leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <TABLE width="100%" height="50">
    	<TR>
    		<TD align="MIDDLE" width="33%">&nbsp
    		</TD>
    		<TD align="MIDDLE" width="33%"><IMG src="xheader.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    		</TD>
    		<TD align="MIDDLE" width="33%"><A href="#" onclick="this.href='cruise-'+padout(currentslide)+'.jpg'"><IMG src="smallpostcard.gif" border="0" alt="Click here to send this photo to a friend..."></A>
    		</TD>
    	</TR>
    </TABLE><A href="javascript:self.close()"><IMG src='cruise-01.jpg' border="0" name="slide" height="480" width="640" alt='Close Window'></A>
    
    <a href='javascript:prevSlide()'>Prev</a>
    <a href='javascript:nextSlide()'>Next</a>
    </body>
    </html>
    Last edited by Arkkimaagi; Jul 10, 2002 at 23:39.

  3. #3
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, and this messageboard seems to add spaces into javascript word, so remember to replace the "java script" words with "javascript"

  4. #4
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's not that.

    but it's definately good practice.
    Use regex - if you're in vi - to replace them all.

    Flawless
    Last edited by Flawless_koder; Jul 11, 2002 at 00:13.
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---


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
  •