Simple jquery question

JavaScript
1

I’m trying to get this jquery out of the box script to work with links.

How can I make the big images and thumbnails clickable so they can be linked to stories on our website? If I add <a href=“link here”><img src…></> with various images to our site, the thumbnails stop working. If the <a href=“”> anochor is removed, the thumbnails work fine.

Thanks for your help in advance…

2

Thanks Ralph, I’ll take a look at it right away :slight_smile:

3

O, well, in that case look at the link in my previous post. Sliders are perfectly designed for this sort of thing. They are usually just divs full of regular content, so it’s easy to add links to other pages.

4
Off Topic:

Do you really need 4 scripts? Not all of them use that many. I’ve got a list of sliders, if that’s any use. Some are easier to make accessible with js off than others. Anything Slider is a good one. (I prefer to get rid of all the buttons and stuff, though…)

5

Thank you all for your responses, I’m still struggeling to make this work and it’s so annoying by now that it keeps me away from all the other work I’m supposed to get done.

Stomme poes, you make some very valid points. If you know of a simple slider that can be used to rotate news items, I’ll definitely take a look at those. I don’t care if I have to feed the rotator with the urls/images manually, as long as it works and the images are linkable to other subpages on the website.

I’ll give your suggestion another try to see if I can make it work.

hehe ok Ralph, based on the replies so far I now KNOW it’s far from easy, especially because I’m far from a JS/jquery guru myself. At the time of my first post I thought it was a minor tweak in the code or what not, especially for a jquery/JS mastermind.

6

[ot]Oh lord, I’ve been asked to make a slidey scrolly thingamajiggy on some pages of ours, which I need to use jQuery for because I simply don’t know enough Javascript to learn all the little things they want, nor are there any good examples for students anywhere, because all sliders are written in jQuery, arg. So currently our poor users will be downloading at least 4 separate scripts, just for freaking scrolling images (I guess to make them harder to click, because everyone goes onto the internet to play Whack-A-Mole, not to actually use stuff, lawlz).
I’m getting more bitter by the moment, esp since I’m trying to do the same thing as the OP: adjust some jJunk.[/ot]

7

Good points, Stomme poes.

[ot]

Thanks for that. I didn’t know what the correct terminology was for this sort of thing. :lol:[/ot]

8

Why I don’t like jQuery: it’s a black box that just magically Does Stuff, unless you’re already a Javascript expert, which the majority of users aren’t (because it’s targetted to those who don’t know Javascript, by doing everything for you… vicious circle).

I don’t believe you can add custom urls without significant rewriting of the Javascript, though this is just my uninformed opinion based on this code:


$(function() {
    $('#slideshow').cycle({
        timeout: 3000,
        pager:  '#nav',
        pagerAnchorBuilder: function(idx, slide) {
           [b] return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';[/b]
        }
    });
});

An anchor is generated by the javascript itself, and because it’s building a list, it makes each one the same, with href=“#”. To make each href different and specific per iteration would mean somewhere a new loop would need to be written, and then it would have to grab the urls from somewhere. Where? Likely you’d have to make lists of urls. This is completely unhandy.

Although, there is that slide.src which is grabbing the image sources, so maybe wherever that’s sitting, could have urls and that added to this line:

return ‘<li><a href=“’ + urlz + '”><img src="’ + slide.src + ‘" width=“50” height=“50” /></a></li>’;

Still, knowledge of how all this stuff works is still required to even get that doing something useful… if it’s that easy, then it may well be worth it to have a jQuery expert come in here and figure out how this could be configured.

What might just be easier (easier than rewriting a jQuery plugin family) is to find some other scrolly slidey link generating whatsit. Ideally, one where the small thumbs are already on the page and already clickable, with Javascript simply making the large image change regularly. Hm, even maybe using the idea of CSS rollovers with Javascript merely shuffling the image in the large copy and doing nothing else. I don’t see a good reason why javascript is building that list of thumbnails at all. Why do they explicitly want to hide that from those without JS, when the JS is only making the thumbs cycle through the large image??? Like anyone without JS is going to care that the large image doesn’t change! But they’ll have pretty little thumbnail links like everyone else.

General rule: only build things in the DOM with JS when those things themselves only work or make sense with JS enabled. That means, everything else should be in the HTML.

9

Never assume a question is simple if you don’t know the answer. :slight_smile: I don’t know enough about JavaScript/jQuery to know how to achieve what you want, but the <a> links in that script are integral to the slideshow functionality, so changing them is not a straightforward matter. It would defeat the purpose of the gallery, I would think.

Until I learn jQuery better (which I intend to do!) I don’t mess with these scripts much, beyond editing the CSS.

Hopefully someone else can provide a solution.

10

Hey Ralph, that slider works great, even without all the mumo jumbo arrows and go/stop buttons. Thanks for the link :slight_smile: