JQuery Get String From

Question

This should be a tweak for the jQuery based image gallery "Galleria". You can click on a thumbnail div called images and it brings you on the site based on the url in the class of the a tag.

Pseudo Code HTML

<div id="galleria">
    <div class="images"><a class="www.google.com" href="bens_img/1.jpg"><img src="bens_img/thumb1.jpg"></a>
    <div class="images"><a class="www.yahoo.com" href="bens_img/2.jpg"><img src="bens_img/thumb2.jpg"></a>
    <div class="images"><a class="www.tokyo.co.jp" href="bens_img/3.jpg"><img src="bens_img/thumb3.jpg"></a>
</div>

Pseudo JQuery (JavaScript)

Get Value from class of <a>
Onclick ".images".this
href to Value from class of <a>

just FYI, using a class element for data value is conceptually wrong. — Elzo Valugi, Nov 24 '10 at 07:55
At the very least, use an HTML5 `data-` attribute instead, such as `data-external-link` — Eric, Nov 24 '10 at 08:15

score 0 · Accepted Answer · edited May 23 '17 at 12:31

0

If i've understood correctly,

$('galleria.images').click(function(){
   window.location.href = $("a", this).attr('class');
});

//although i wonder why you'd put href's within a class attribute. hmmm..

Do take a look at this SO post on valid characters for CSS classes.

edited May 23 '17 at 12:31

Community

1
1

answered Nov 24 '10 at 07:40

Robin Maben

22,194
16
64
99

Thats because the "Galleria" interpreted it like this. – Tomkay Nov 24 '10 at 07:41
@Freeman: but this makes me vary. what if there are invalid characters(for HTML classes) but otherwise valid url?.. – Robin Maben Nov 24 '10 at 07:43
I would question using a plugin that renders a URL to an anchor class. – Ryan Eastabrook Nov 24 '10 at 08:00

score 0 · Answer 2 · answered Nov 24 '10 at 07:52

0

Unless I'm missing something, is there any reason why the URL is in the class of the anchor? You have the image path in the href (normally reserved for the destination URL), and then you have a nested img tag with the same reference. Wouldn't your code look more like this?

    <div class="images"><a href="www.google.com"><img src="bens_img/thumb1.jpg"></a></div>

answered Nov 24 '10 at 07:52

Ryan Eastabrook

4,085
5
30
35

Galleria usully interprete it like this:
- And I need a tweak, when you click on the div (which contains the thumnail.jpg) then you where href'ed to another webpage.
– Tomkay Nov 24 '10 at 07:59
did you add the class="www.google.com" then? Or was it the plugin? – Ryan Eastabrook Nov 24 '10 at 08:08

Michael Low · Answer 3 · 2010-11-24T08:03:24.673

0

Putting this in the $(document).ready(function() { ... }) should fix it.

$('#galleria div.images a').each(function(){
   $(this).attr("href", "http://" + $(this).attr('class'));
});

You're missing closing </div> tags on each of the <div class="images"> too BTW.

Edit: http://jsfiddle.net/Ku6Pc/ is an example to show it working.

edited Nov 24 '10 at 08:03

answered Nov 24 '10 at 07:53

Michael Low

24,276
16
82
119

JQuery Get String From

3 Answers3