Javascript newbie questions.. 1. picnumber-? 2. Slideshows 3.Slideshow link

Discussion in 'JavaScript' started by krisdude, Sep 10, 2009.

0
  1. #1
    1. Hello, Im putting up a slideshow using javascript-
    This is my code-
    document.myPicture.src=picture[picNumber-1] This line can anybody explain? The number inside the bracket indicated the no. of picture from the Array, which is why we write picNumber in the bracket. Why do we write the '-1' after that. (The code doesnt work without it.) After writing the function, suppose nextPicture(), we get the number of pic from the array to be used in picNumber. Then why do we have to subtract 1([picNumber-1]) from that value.

    2. Do you ll guys know how they do the fade effect in slideshows. I need a most basic javascript tutorial which I can apply to the above code so that the images fade in and out when I press next or previous links.

    3. Can you put a link over each image that redirects to that page or link every image to a different page. Like they do in wordpress featured posts plugins. Please dont recommend me a plugin, I need to do it on my own.

    Thank you guys. I love the help shared here. Please try to answer no. 2 & 3 atleast most people must have a hard time finding these answers on google like me.

    Kris
     
    krisdude, Sep 10, 2009 IP
  2. gumape

    gumape Peon

    Messages:
    30
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Answer for your first question.

    The following code snippets are equivalent, the only difference is that the value of picNumber is one bigger in the first one than in the second one:

    1.
    <script language="javascript">
    var picture = new Array("img.jpg", "img1.jpg","img2.jpg","img3.jpg","img4.jpg");
    var picNumber = 1;
    var numberofPics = picture.length;

    function previousPicture()
    {
        if(picNumber > 1)
        {
            picNumber--;
        }
        document.myPicture.src = picture[picNumber-1];
    }

    function nextPicture()
    {
        if(picNumber < numberofPics)
        {
            picNumber++;
        }
        document.myPicture.src = picture[picNumber-1];
    }
</script>
    Code (markup):
    2.
    <script language="javascript">
    var picture = new Array("img.jpg", "img1.jpg","img2.jpg","img3.jpg","img4.jpg");
    var picNumber = 0;
    var numberofPics = picture.length;

    function previousPicture()
    {
        if(picNumber > 0)
        {
            picNumber--;
        }
        document.myPicture.src = picture[picNumber];
    }

    function nextPicture()
    {
        if(picNumber < numberofPics - 1)
        {
            picNumber++;
        }
        document.myPicture.src = picture[picNumber];
    }
</script>
    Code (markup):
     
    gumape, Sep 10, 2009 IP
  3. gumape

    gumape Peon

    Messages:
    30
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I think this link helps you to answer your second question:
    http://brainerror.net/scripts/javascript/blendtrans/
     
    gumape, Sep 10, 2009 IP
  4. gumape

    gumape Peon

    Messages:
    30
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Finally, an example code for your third question:

    <script language="javascript">
    var picture = new Array("img.jpg", "img1.jpg","img2.jpg","img3.jpg","img4.jpg");
    var picNumber = 0;
    var numberofPics = picture.length;

    function previousPicture()
    {
        if(picNumber > 0)
        {
            picNumber--;
        }
        document.myPicture.src = picture[picNumber];
    }

    function nextPicture()
    {
        if(picNumber < numberofPics - 1)
        {
            picNumber++;
        }
        document.myPicture.src = picture[picNumber];
    }

    function OnImageClick ()
    {
		var url;
		switch (picNumber) {
		case 0:
			url = "http://www.example.com/site1.php";
			break;
		case 1:
			url = "http://www.example.com/site2.php";
			break;
		}

		window.location.href = url;
    }
</script>

</head>

<body>
	<div style="width:360px">
		<img src="img.jpg" onclick="OnImageClick ()" name="myPicture" width="350", height="200" style="border:solid 3px #999999">
		<br />
		<p align="center">
			<a href="Javascript:previousPicture()"><img src="previous.jpg" border="0"></a>
			<a href="Javascript:nextPicture()"><img src="next.jpg" border="0"></a>
		</p>
	</div> 
</body>
    Code (markup):
     
    gumape, Sep 10, 2009 IP
    krisdude likes this.
  5. krisdude

    krisdude Well-Known Member

    Messages:
    610
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    108
    #5
    Hey Gumape,
    thanks so much for the help.:) +rep added.
    Does anyone know about the featured posts in wordpress plugins. Are they made using javascript?
     
    krisdude, Sep 11, 2009 IP