увеличение картинок на сайте - JavaScript, Ajax

Приморье · 26.02.2023, 07:44

Здравствуйте, уважаемые форумчане.
Окажите, пожалуйста, содействие.
Есть скрипт .js для увеличения изображений на сайте. Он прекрасно работает, но с обычным тегом img

Код:

<img src="img/kony.jpg" alt="картинка" class="foto" tabindex="0">

.
Если же его использовать с функцией <picture>, то получается следующее: если браузер распознает форматы .webp, то на странице сайта изображение отображается в формате .webp, но при клике по изображению увеличенное изображение выходит в формате .jpg.
Помогите изменить (или дополнить) скрипт js так, чтобы увеличенное изображение было в том же формате, что и маленькое, отображаемое на сайте.
Полный код для понимания размещаю ниже.

Код:

<!DOCTYPE html>
<head>
<title>Увеличение изображения</title>

<!-- стили картинки на странице и увеличенной картинки -->
<style>
.foto  {
cursor:  -webkit-zoom-in;
cursor:  zoom-in;
width: 30%; 
margin: 15px;
}
.simple-img  {
	position: fixed;
	z-index:2;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
	max-height: 90%;
	cursor:  -webkit-zoom-out;
    cursor:  zoom-out;
}
.simple {
	position: absolute;
	height:100%;
	width:100%;
	top:0;
	left:0;
	display:none;
	text-align:center;
}

.simple-overlay {      /* блок затемнения */
	background:rgba(0,0,0,0.9);
	position:fixed;
	z-index:1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: auto;
    height: auto;
}
</style>

<script src="jquery-3.6.3.min.js"></script> 
<!-- скрипт увеличения картинки -->
<script>
$(document).ready(function() { // Ждём загрузки страницы	
	$(".foto").click(function(){	// Событие клика на маленькое изображение	
	  	var img = $(this);	// Получаем изображение, на которое кликнули
		var src = img.attr('src'); // Достаем из этого изображения путь до картинки
		$("body").append("<div class='simple'>"+ //Добавляем в тело документа разметку всплывающего окна
						 "<div class='simple-overlay'></div>"+ // Блок, который будет служить фоном затемненным
                         "<img src='"+src+"' class='simple-img ' />"+ // Само увеличенное фото
						 "</div>");
		$(".simple").fadeIn(50); // Медленно выводим изображение
		$(".simple-img ").click(function(){	// Событие клика на затемненный фон	   
			$(".simple").fadeOut(50);	// Медленно убираем всплывающее окн	
      setTimeout(function() {	// Выставляем таймер
			  $(".simple").remove(); // Удаляем разметку всплывающего окна
			}, 50);
		});
	});	
});
</script>
</head>
<body>
<table style="width: 100%; text-align: center;">
<tr>
<td>
формат картинки на странице .jpg, увеличенной тоже .jpg
<br>
<!-- обычный способ вставки картинки -->
<img src="img/kony.jpg" alt="картинка" class="foto" tabindex="0">

</td>
</tr>
<br><br>
<tr>
<td>
формат картинки на странице .webp (если браузер поддреживает этот формат), а увеличенной уже .jpg 
<br> 
<!-- выбор браузером формата картинки -->
   <picture>
 <source srcset="webp/kony.webp" type="image/webp">
 <source srcset="img/kony.jpg" type="image/jpeg">
 <img src="img/kony.jpg" alt="картинка" class="foto" tabindex="0">
   </picture>

<br><br>
</td>
</tr>
</table>
</body>
</html>

Приморье · 28.02.2023, 14:26

Неужели никто не может подсказать как по клику увеличивать изображения, обвернутые в функцию <picture>?

ADSoft · 28.02.2023, 14:55

да никому не надо скорее всего...

28.02.2023, 14:55	#3
ADSoft Старожил Регистрация: 25.02.2007 Сообщений: 4,159	да никому не надо скорее всего... Сайты, приложения, автоматизация в широком смысле слова

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Просмотр картинок на сайте	Skaid	HTML и CSS	2	02.04.2018 15:11
увеличение картинки на сайте	k_a_m_a_z	Помощь студентам	4	01.07.2010 21:44
Увеличение картинок при наведении и IE8	Saruck	HTML и CSS	4	07.12.2009 10:38
Увеличение и уменьшение картинок	zzzzz	Мультимедиа в Delphi	2	30.08.2008 20:53

28.02.2023, 14:26	#2
Приморье Новичок Джуниор Регистрация: 26.02.2023 Сообщений: 2	Неужели никто не может подсказать как по клику увеличивать изображения, обвернутые в функцию <picture>?