thumbnails won't enlarge in same window - CSS-Tricks

This topic is empty.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
January 6, 2015 at 1:42 pm #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

January 6, 2015 at 1:50 pm #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?

January 6, 2015 at 1:57 pm #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');
        });
    }
});
```
January 6, 2015 at 2:10 pm #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"]');
```
January 6, 2015 at 2:24 pm #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.
January 6, 2015 at 3:01 pm #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
January 6, 2015 at 3:38 pm #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
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The forum ‘JavaScript’ is closed to new topics and replies.