jQuery onclick all images in body

后端未结

关注

 3  725

English isnt my native language so bear with me.

Im trying to make it so that when a user clicks any image on my site a gallery sort of div will become visible containin

相关标签:

3条回答

心在旅途

2021-01-22 18:13

var image = $("img");

image.on('click', function(){
    var imageURL = this.src;
    backgroundCurtain.css("display", "block");
    imageResized.attr("src", imageURL);
    var imageWidth = imageResized.width();
    pictureInner.css("width", imageWidth);
});

0 讨论(0)

情歌与酒

2021-01-22 18:16
The issue is with your selector. The '>' selector specifies an immediate child <body><img /></body>. The selector that @dstroy is suggesting would simply grab any image on the entire page. This, though, may not be what your are trying to accomplish.

I'm assuming you have some form element (let's assume a DIV with ID 'gallery') that contains all of the images you are interested in. You could then use
```
var images = $("#gallery img");
```
This way, icons and 'chrome' images won't be displayed on the background.
0 讨论(0)
发布评论:

提交评论
- 加载中...
渐次进展

2021-01-22 18:26
To reference all images using jquery, simply do
```
var images = $("img");
```
Usually you don't want to have this to apply to all images, though (for example the imageResized shouldn't be in this set). A good solution is to add a css class (for example class="zoomable") to the elements you want to be zoomable and use this selector :
```
var images = $("img.zoomable");
```
Have a look at this reference.

Note that most of the time, we don't use the same URL for the bigger image as this would mean to have big images loaded for thumbnails. My practice is to have a naming pattern like "someFile.jpg" and "someFile-big.jpg" and to do this kind of thing :
```
$("img.zoomable").on('click', function(){
    var imageURL = $(this).attr('src');
    backgroundCurtain.css({"display": "block"});
    imageResized.onload = function(){
        var imageWidth = imageResized.width();
        pictureInner.css({"width" : imageWidth});
    };
    imageResized.attr("src", imageURL.split('.')[0]+'-big.jpg');
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...