SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Livin' the dream.. ThreeD!'s Avatar
    Join Date
    Oct 2004
    Location
    Online
    Posts
    258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Simple jquery question

    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..
    * Losers make excuses - winners make it happen *
    Your dream can come true - if you have the courage to pursue it!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Never assume a question is simple if you don't know the answer. 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.

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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:
    Code:
    $(function() {
        $('#slideshow').cycle({
            timeout: 3000,
            pager:  '#nav',
            pagerAnchorBuilder: function(idx, slide) {
                return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
            }
        });
    });
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Good points, Stomme poes.

    Off Topic:

    Quote Originally Posted by Stomme poes View Post
    some other scrolly slidey link generating whatsit.
    Thanks for that. I didn't know what the correct terminology was for this sort of thing.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    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.

  6. #6
    Livin' the dream.. ThreeD!'s Avatar
    Join Date
    Oct 2004
    Location
    Online
    Posts
    258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


    Quote Originally Posted by ralph.m View Post
    Never assume a question is simple if you don't know the answer.
    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.
    * Losers make excuses - winners make it happen *
    Your dream can come true - if you have the courage to pursue it!

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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...)

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ThreeD! View Post
    If you know of a simple slider that can be used to rotate news items, I'll definitely take a look at those.
    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.

  9. #9
    Livin' the dream.. ThreeD!'s Avatar
    Join Date
    Oct 2004
    Location
    Online
    Posts
    258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph, I'll take a look at it right away
    * Losers make excuses - winners make it happen *
    Your dream can come true - if you have the courage to pursue it!

  10. #10
    Livin' the dream.. ThreeD!'s Avatar
    Join Date
    Oct 2004
    Location
    Online
    Posts
    258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ralph, that slider works great, even without all the mumo jumbo arrows and go/stop buttons. Thanks for the link
    * Losers make excuses - winners make it happen *
    Your dream can come true - if you have the courage to pursue it!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •