Javascript add link to images which are switched by code

Question

I'm using the script found on here (http://css3.bradshawenterprises.com/cfimg/#cfimg7), and I'm just wondering if it's possible to add links to the images?

Adding links to the html around the images doesn't work, and I tried adding a bit of javascript link code from looking online but it wouldn't work either (I'm 99% sure I used it wrongly though)

Anyways, part of the code says this

$("#cf7 img").eq(newImage).addClass("opaque");

This is the part I tried adding from How do I create a link using javascript?, I'm not surprised it didn't work though.

$("#cf7 img").eq(newImage).setAttribute("href", testlink);
$("#cf7 img").eq(newImage).innerHTML = linktext;
document.body.appendChild($("#cf7 img").eq(newImage));

Any help would be appreciated, there's a total of 5 images I would like to link to their own URL's (they're big images, so clicking on any of them should bring it up to full size)
Cheers :)

mas.morozov · Accepted Answer · 2013-10-19T11:50:08.527

Unfortunately, none of solutions making <a>s of individual images, adding onclick to them or etc. will work - becasue of the way you are using CSS to switch images. Images are only made transparent, not hidden. So the top one will always recieve all events, not the one beeing displayed.

Fortunately, I have solution that will work :)

Add one common <a> tag on top of the images, like this:

<div id="cf7" class="shadow">
    <a href="#" onclick="return cf7clicked();">
        <img class='opaque' src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg" />
        <img src="http://css3.bradshawenterprises.com/images/Turtle.jpg" />
        <img src="http://css3.bradshawenterprises.com/images/Rainbow%20Worm.jpg" />
        <img src="http://css3.bradshawenterprises.com/images/Birdman.jpg" />
    </a>
</div>

And add javascript like this, that will decide which image was clicked and take appropriate action:

function cf7clicked() {
    var sel_idx = $('#cf7_controls .selected').index();
    alert(sel_idx); // only for demo!
    var img_src = $('#cf7 img').eq(sel_idx).attr('src');
    var fullsize_src = img_src; // get path to fullsize version of the image
    window.location.href = fullsize_src; // or use lightbox, or ...
    return false;
}

That is it in JSfiddle - http://jsfiddle.net/8UvUV

Ahh thanks a lot man, that worked perfectly :D Also cheers for the demo too, it was helpful seeing how it actually worked :) — Peter, Oct 19 '13 at 14:51

score 0 · Answer 2 · edited Oct 19 '13 at 10:34

0

Why would you use javascript to add the links? As long as the class is still there i would assume you could link them via the html.

So for example, within the div #cf7 you would add an image link like <a href="linktolargerimage"><img src="smallerimage"></a>

This way when you click the thumnail images they will definately load the larger image in a new tab.

edited Oct 19 '13 at 10:34

Joke_Sense10

5,341
2
18
22

answered Oct 19 '13 at 10:29

Dan Ruxton

386
1
3
18

I presume javascript would be the way this time round, because adding the tags to it doesn't do a thing. The javascript does something where it seems to bypass the actual html code, so it looks nice but stops anything you add to the images from working correctly :P – Peter Oct 19 '13 at 10:54
I see. I never had a chance to check the code myself. Thanks for clearing that up. – Dan Ruxton Oct 19 '13 at 10:55

score 0 · Answer 3 · answered Oct 19 '13 at 10:35

0

Why don't just put <img/> into a <a> , use HTML

<a href="#"> 
<img src="myImage.jpg"/> 
</a>

Or

You can use onclick within <img/> tag to change top.location i.e.

<img src="http://css3.bradshawenterprises.com/images/Birdman.jpg" onClick='alert("Hello World!")' width="100px" height="100px"/>

answered Oct 19 '13 at 10:35

Adam Azad

11,171
5
29
70

It annoyingly doesn't work doing that, the onclick doesn't display a message, and the tag doesn't do anything either. I was wondering if anyone knew a way around this, because the script does something to the images which removes anything else you try add :P – Peter Oct 19 '13 at 10:50
CSS `absolute` causes this problem If you played around CSS You could solve it :P – Adam Azad Oct 19 '13 at 11:20

Claudio Santos · Answer 4 · 2013-10-19T11:24:25.810

0

You can't add links to an image, you can only simulate a link behavior.

To do that you need to intercept the event click of your image and then change the cursor property to pointer when the user move the mouse over them.

I made a sample to show how to do that.

JavaScript

$('.imgLarge').click(function(){
  changeHeight(this);
});

CSS

.imgMini:hover{
  opacity:0.7;
  cursor:pointer;
}

edited Oct 19 '13 at 11:24

answered Oct 19 '13 at 10:43

Claudio Santos

1,307
13
22

Thanks, the only problem is putting tags around the image doesn't do anything. And the guy below suggested the onclick event, but that doesn't work with the code either. I linked to the place I got it from to see if anyone knew what it was doing haha, I couldn't figure out how to change it to let me add a link to the image :P – Peter Oct 19 '13 at 10:52
In your example, the image doesn't have a link, only the span have a link. – Claudio Santos Oct 19 '13 at 10:59
You could also intercept the click event of those images with `$('.imageClass').on('click',function(){//do what you need});` without add any other element around you image. – Claudio Santos Oct 19 '13 at 11:02

score 0 · Answer 5 · answered Oct 19 '13 at 11:21

you can do one thing i.e. define the onclick event on the images as follows:

<img src="URL" onclick="location.href=this.src" style="zoom:0.25; cursor:pointer">

This will show the image in a smaller dimension(i.e. 0.25x) but when you click on it, it will be opened in its original size.

Javascript add link to images which are switched by code

5 Answers5