Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript thumbnails won't enlarge in same window

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #192421
    Baerspective
    Participant

    i found this small JS script which enlarges thumbnails upon mouse click. in the example, the thumbnail opens/enlarges in same window. in my situation they don’t. on top of that, when clicked on enlarged picture (in my case), it wont go back to its thumbnail size.

    what am i doing wrong? i am JS illiterate.

    http://baerspective.com/alcan/gallery.html

    #192422
    Senff
    Participant

    That page doesn’t include any script that deals with thumbnails, images, enlarging, etc.

    All I see is two jQuery libraries (you only need one!) and a script that checks if the page is accessed on a device with a touch screen.

    Did you actually add the script that you found to your page?

    #192424
    Baerspective
    Participant

    this is the script. i put it at bottom of the slew of images.



    $(document).ready(function() { var imageLinks = $('a[href$=".png"], a[href$=".jpg"], a[href$=".gif"], a[href$=".bmp"]'); if (imageLinks.children('boxInner').length) { imageLinks.children('boxInner').each(function() { var currentTitle = $(this).attr('title'); $(this).attr('title', currentTitle + ' (click to enlarge image)'); }); imageLinks.click(function(e) { e.preventDefault(); $(this).children('boxInner').toggleClass('expanded'); }); } });
    #192425
    Senff
    Participant

    You’re right, my mistake.

    First thing to do, make sure you only load ONE jQuery library.
    Second, make sure that your script comes AFTER loading your jQuery library.

    Maybe that helps.

    It’s also possible that all the extensions in your code are all caps:

    <a href="gallery/amberhall.JPG" alt="garage"><img src="gallery/amberhall.JPG" alt="garage"></a>
    

    But in your script they’re lower caps:

    var imageLinks = $('a[href$=".png"], a[href$=".jpg"], a[href$=".gif"], a[href$=".bmp"]');
    

    So try to change it in your script to this:

    var imageLinks = $('a[href$=".PNG"], a[href$=".JPG"], a[href$=".GIF"], a[href$=".BMP"]');
    
    #192426
    Baerspective
    Participant

    im such a JS illiterate, what do you mean by “Second, make sure that your script comes AFTER loading your jQuery library.”?

    can you never load two different jQuery libraries? they have nothing to do with one another. one is for touch screen devices. the other, the jquery.min.js is for this script.

    also, i just added the upper caps to the lower one like so:

    var imageLinks = $('a[href$=".png"], a[href$=".PNG"], a[href$=".jpg"], a[href$=".JPG"], a[href$=".gif"], a[href$=".GIF"], a[href$=".bmp"], a[href$=".BMP"]');
    
    

    if that’s a no-no, then probably why the thumbnails will open in a new window?

    so thankful for your patience. apologies for my daftness.

    #192429
    Alen
    Participant

    im such a JS illiterate, what do you mean by “Second, make sure that your script comes AFTER loading your jQuery library.”?

    <head>
    ... load jQuery here
    </head>
    
    <body>
    ... content here
    ... your scripts here
    </body>
    

    can you never load two different jQuery libraries? they have nothing to do with one another.

    There’s no reason to load both. They essentially do the same thing, but loading them both will cause conflicts. You only need one.

    Here’s a quick demo that might help

    CodePen

    #192436
    Baerspective
    Participant

    thanks Alen,
    looked at codepen. html and css make perfect sense. js on the other hand, well let’s say i’m still confounded as to why the script i am using is not behaving like the example is.

    well, i guess i’ll have to do more digging.

    thanks for your help

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.