creating an href in javascript or jquery for a slideshow

[GraficRegret]

I am trying to add the ability to add an href to specific pictures in my slideshow, however I am not sure how to create an href in javascript or jquery, I have searched all over, however my web searching skills are weak and I have thus far been unable to find a solution that works for me here is the code that I am trying to add the href to:

var image1 = 'images/index_19.jpg';
var image2 = 'images/details_10.jpg';



var images2 = [image1, image2];

$(document).ready(function()
{
    setInterval(forwardImage2, 4000);

    //This function will find the key for the current Image
    function currentImageKey2() {
        i = jQuery.inArray($('#slideshow2').attr('src'), images2);
        return i;
    }

    //This function will move the slideshow forward one
    function forwardImage2()
    {
        currentImageKey2();

        if (i < images2.length - 1)
        {
            changeImage2(i + 1);
        }else 
        {
            changeImage2(0);
        }
    }

    //This function will change to image to whatever the variable i passes to it
    function changeImage2(i) {
        $('#slideshow2').stop().animate({
            opacity: 0,
        }, 200, function() {
            $('#slideshow2').attr('src', images2[i]);
            $('#holder img').load(function() {
                $('#slideshow2').stop().animate({
                    opacity: 1,
                }, 200)
            })
        })
    }
});

thanks in advance for any help you can provide.

[gon1387]

Hi GraficRegret,

Hope this helps.

    //Container for the image sources
var images = ["img/image1.jpg","img/image2.jpg","img/image3.jpg"],
    //temporary counter
    ctr,
    //Container for the images within an A element
    imgElem=[],
    //Temporary storage for the element
    $tempElem;

for(ctr in images){
    //Creates an image tag
    $tempElem = $("<img>");
    //Assign the image source to the IMG tag
    // Will automatically load the image in background
    $tempElem.attr("src", images[ctr]);
    // Suround the img element in an A tag with an href of google.com
    $tempElem = $("<a>").attr("href","http://www.google.com").append($tempElem);

    //Put the element in the Cointainer
    imgElem.push($tempElem);
}

[GraficRegret]

that looks like it will add the same href to all the pictures, I need to be able to add a different href to each picture in the slideshow, it is going to be kindof like a slideshow with advertisments from different contributors.

[gon1387]

Hi GraficRegret,

That's just to give you an idea how. Here's the same code adding different url.

    //Container for the image sources
var images = ["img/image1.jpg","img/image2.jpg","img/image3.jpg"],
    href = ["http://www.yahoo.com","http://www.google.com","http://www.facebook.com"],
    //temporary counter
    ctr,
    //Container for the images within an A element
    imgElem=[],
    //Temporary storage for the element
    $tempElem;

for(ctr in images){
    //Creates an image tag
    $tempElem = $("<img>");
    //Assign the image source to the IMG tag
    // Will automatically load the image in background
    $tempElem.attr("src", images[ctr]);
    // Suround the img element in an A tag with an href of google.com
    $tempElem = $("<a>").attr("href",href[ctr]).append($tempElem);
    //Put the element in the Cointainer
    imgElem.push($tempElem);
}

[GraficRegret]

ok thanks, I am new to jquery so im not always sure what to do with code, and my javascript is apparently more rusty then I though it was, guess its time to get new books and read up on my languages.

[gon1387]

OFF TOPIC
I'd suggest Mozilla's javascript documentation, it's one good site to learn with, and jquery have revamped their api doc website and is a lot more informative, and beginner friendly; it's the best resource you can have for free. Lastly, here, just post a thread if you're stuck, and we'll give it a shot to lend a hand. :)

[GraficRegret]

ok I'm not sure what I am doing wrong but this code does not work the slideshow doesn't even roll now I have tried a couple of different ways of implementing it now.

[GraficRegret]

OFF TOPIC
I'd suggest Mozilla's javascript documentation, it's one good site to learn with, and jquery have revamped their api doc website and is a lot more informative, and beginner friendly; it's the best resource you can have for free. Lastly, here, just post a thread if you're stuck, and we'll give it a shot to lend a hand. :)

would you happen to have the url for that resource?

[gon1387]

If you have an existing image and wanted to enwrap it with an A tag, here's a snippet you can follow:

// Create the A tag and assign a URL
var url = "http://www.google.com",
    $AnchorTag = $("<a>").attr("src", url);

//BEFORE WRAP
// <img src="MYURL" />
$(".your-image").wrap($AnchorTag);
//AFTER WRAP
// <a href="http://www.google.com"><img src="MYURL" /></a>

Here you are:
MDN Javascript
jQuery API

[GraficRegret]

thanks for the help G I will definitely get into those

[GraficRegret]

Is php and jquery so similar that you declare variables the same way for both? I am refering to the '$AnchorTag' variable I haven't had a chance to read up on the sites you sent me yet so please bear with my ignorance.

[gon1387]

It's ok.
It's a naming convention for jquery objects, just a mnemonic to tell the coders that it has a jquery object and jquery methods are applicable for use.

[GraficRegret]

ok so in adition to the code I showed you earlier I came up with this:

var images2 = new Array();
var image = ['images/index_19.jpg', 'images/details_10.jpg'];
var href = ['inventory.php', ''];
var length = (image.length - 1);

for(var j = 0; j < length; j++)
{
    $AnchorTag = $("<a>").attr("src", href[j]);
    images2.push($(".image[j]").wrap($AnchorTag));
}

this almost works but it just makes it so that the elements show up as 'object'rather then what it should show up as, I know I'm close to figuring it out. Could you help me fix this code so that it displays properly? here is the full code for my slideshow in case you need it:

var images2 = new Array();
var image = ['images/index_19.jpg', 'images/details_10.jpg'];
var href = ['inventory.php', ''];
var length = (image.length - 1);

for(var j = 0; j < length; j++)
{
    $AnchorTag = $("<a>").attr("src", href[j]);
    images2.push($(".image[j]").wrap($AnchorTag));
}

$(document).ready(function()
{
    setInterval(forwardImage2, 4000);

    //This function will find the key for the current Image
    function currentImageKey2() {
        i = jQuery.inArray($('#slideshow2').attr('src'), images2);
        return i;
    }

    //This function will move the slideshow forward one
    function forwardImage2()
    {
        currentImageKey2();

        if (i < images2.length - 1)
        {
            changeImage2(i + 1);
        }else 
        {
            changeImage2(0);
        }
    }

    //This function will change to image to whatever the variable i passes to it
    function changeImage2(i) {
        $('#slideshow2').stop().animate({
            opacity: 0,
        }, 200, function() {
            $('#slideshow2').attr('src', images2[i]);
            $('#holder img').load(function() {
                $('#slideshow2').stop().animate({
                    opacity: 1,
                }, 200)
            })
        })
    }
});

thanks again

[kgweb]

I have never used Jscript so will not attempt to suggest a complete coding solution, but would your problem be more easily solved with an onClick attribute in the image tag which resets the URI location property? If you were coding it in HTML it would look like:

  <img src="image1.gif" onClick="location='linkedpage.html'">

You should be able to organise code to set the image filename and the link destination.

[gon1387]

First you have tocheck on line 9.
images2.push($(".image[j]").wrap($AnchorTag));
if you, by any chance, mean getting the element with class ".image0" and "image1", then it won't work. You can never get the value of j inside the string literal.

[GraficRegret]

i tried moving the [j] outside of the string literal as well and still it is delivering only "[object Object]" into the array, what am I missing in my code to get it to deliver the string needed to see the picture and have the href wrapped around it?

[GraficRegret]

ok well it seems that there is no way to successfully wrap slideshow elements in an href, thank you all for your time and patience.