creating an href in javascript or jquery for a slideshow

Question

GraficRegret 0 Junior Poster

11 Years Ago

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.

javascript

3 Contributors
16 Replies
312 Views
1 Day Discussion Span
Latest Post 11 Years Ago Latest Post by GraficRegret

All 16 Replies

gon1387 22 Newbie Poster

11 Years Ago

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);
}

gon1387 22 Newbie Poster

11 Years Ago

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);
}

Edited 11 Years Ago by gon1387

gon1387 22 Newbie Poster

11 Years Ago

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. :)

Edited 11 Years Ago by gon1387

gon1387 22 Newbie Poster

11 Years Ago

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

Edited 11 Years Ago by gon1387

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

GraficRegret 0 Junior Poster · Answer 1 · 2013-02-13T18:25:30+00:00

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.

GraficRegret 0 Junior Poster · Answer 2 · 2013-02-13T18:52:04+00:00

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.

GraficRegret 0 Junior Poster · Answer 3 · 2013-02-13T20:38:31+00:00

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 0 Junior Poster · Answer 4 · 2013-02-13T21:21:02+00:00

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?

GraficRegret 0 Junior Poster · Answer 5 · 2013-02-13T21:54:08+00:00

thanks for the help G I will definitely get into those

GraficRegret 0 Junior Poster · Answer 6 · 2013-02-13T22:27:10+00:00

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 22 Newbie Poster · Answer 7 · 2013-02-13T22:33:20+00:00

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 0 Junior Poster · Answer 8 · 2013-02-13T22:46:52+00:00

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 0 Newbie Poster · Answer 9 · 2013-02-14T02:51:43+00:00

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 22 Newbie Poster · Answer 10 · 2013-02-14T13:00:07+00:00

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 0 Junior Poster · Answer 11 · 2013-02-14T16:19:05+00:00

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 0 Junior Poster · Answer 12 · 2013-02-14T21:42:27+00:00

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.

creating an href in javascript or jquery for a slideshow

Recommended Answers Collapse Answers

All 16 Replies

Recommended Answers