jQuery onclick all images in body
2690 просмотра
3 ответа
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 containing the image at its fullest size.
The way I've done now is;
var image = $("body > image");
image.on('click', function(){
var imageURL = $(this).attr('src');
backgroundCurtain.css({"display": "block"});
imageResized.attr("src", imageURL);
var imageWidth = imageResized.width();
pictureInner.css({"width" : imageWidth});
});
This isn't working and to be honest I wasn't expecting it to work. How do I call it so that every image element inside body. How do I "call" every image inside body?
Автор: Unidan Источник Размещён: 12.11.2019 09:25Ответы (3)
4 плюса
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');
});
Автор: Denys Séguret
Размещён: 29.08.2012 04:41
1 плюс
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);
});
Автор: adeneo
Размещён: 29.08.2012 04:42
1 плюс
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.
Автор: Babak Naffas Размещён: 29.08.2012 04:46Вопросы из категории :
- jquery Прокрутка переполненных DIV с помощью JavaScript
- jquery Экранирование строк HTML с помощью jQuery
- jquery Как сравнить HTML-сущность с JQuery
- jquery Есть ли функция "существует" для jQuery?
- jquery Как удалить все параметры в окне выбора, а затем добавить один вариант и выбрать его с помощью jQuery?
- onclick Нажать кнопку «JavaScript» на кнопке «Ввод» в текстовом поле.
- onclick Вызов onclick в списке радиокнопок с использованием JavaScript
- onclick Android onClick метод
- onclick Как вызвать несколько функций JavaScript в событии onclick?
- onclick Чем именно атрибут XML android: onClick отличается от setOnClickListener?
- document Как получить весь документ HTML в виде строки?
- document MongoDB: Как обновить несколько документов с помощью одной команды?
- document Создайте папку внутри папки документов в приложениях iOS
- document Как заставить Finder 'Open With' работать для моего приложения (Xcode, OS X)?
- document Получить документ IFrame из JavaScript в основном документе
- image Хранение изображений в БД - да или нет?
- image Эффективное изменение размера JPEG изображения в PHP
- image Алгоритм сравнения двух изображений
- image Изображения в PHP
- image Как я могу измерить сходство между двумя изображениями?