Форум

Артем163 · #1 (**permalink**) 16.04.2014, 11:43

Всем привет!

Я уже третий день пытаюсь сделать изменение размера изображения по клику. Пока что, получилось только открывать оригинальное изображение в новом попапе без возможности вернуться к изначальному:

$('.gallery a').fancybox({ 
        hideOnContentClick: false,
        overlayShow: true,
        overlayOpacity: 0.5,
        zoomSpeedIn: 500,
        zoomSpeedOut: 300,
        titlePosition: 'inside',
        cyclic: true,
        onComplete: function(){
            $('#fancybox-img').fancybox({ 
                overlayShow: true,
                overlayOpacity: 0.5,
                zoomSpeedIn: 500,
                zoomSpeedOut: 300,
                hideOnContentClick: true,
                autoScale: false,
                titlePosition: 'inside',
                cyclic: true
            });
        }

Я хочу что-то вроде: $.toggle(autoScale: false). Я не слишком силен в js и буду очень рад, если кто-нибудь сможет помочь

рони · #2 (**permalink**) 16.04.2014, 11:47

Артем163,
может макет, а не обрывок кода? html css самим догадатся, какие они у вас?

Артем163 · #3 (**permalink**) 16.04.2014, 12:00

<ul>
<li>
		<p class="gallery">
			<a href="/images/content/img.jpeg">
				<span id="selection_index9" class="selection_index"></span>Посмотреть отзыв
			</a>			
		</p>
	</li>
	<li>...</li>
	<li>...</li>
	</ul>

<div id="fancybox-wrap" style="opacity: 1; width: 605px; height: 817px; top: 420px; left: 309px; display: block;">
	<div id="fancybox-inner" style="top: 45px; left: 45px; width: 515px; height: 729px; overflow: hidden; display: block;">
		<img id="fancybox-img" src="/images/content/img.jpeg">
	</div>
	<a id="fancybox-close" style="display: inline;"></a>
	<a href="javascript:;" id="fancybox-left" style="display: inline;">
		<span class="fancy-ico" id="fancybox-left-ico">
		</span>
	</a>
	<a href="javascript:;" id="fancybox-right" style="display: inline;">
		<span class="fancy-ico" id="fancybox-right-ico">
		</span>
	</a>
	<div id="fancybox-title" class="fancybox-title-inside" style="width: 515px; padding-left: 45px; padding-right: 45px; display: block;">
		<span>Lorem ipsum dolor sit amet
	</span>
	</div>
</div>

рони · #4 (**permalink**) 16.04.2014, 12:20

Артем163,
ок уже лучше ... но так и непонял

Сообщение от Артем163

сделать изменение размера изображения по клику

Сообщение от Артем163

Я хочу что-то вроде: $.toggle(autoScale: false)

на пальцах смогешь обьяснить?

Артем163 · #5 (**permalink**) 16.04.2014, 13:04

Цитата:

на пальцах смогешь обьяснить?

рони, открывается fancybox, картинка подгоняется по размеру экрана, кликаю по картинке, открывается fancybox с той же картинкой, но с оригинальным размером, кликаю еще раз по картинке- снова открывается fancybox с той же картинкой по размеру экрана

рони · #6 (**permalink**) 16.04.2014, 15:06

Артем163,
танцы с бубнами ... кликаем по ссылке, кликаем по всплывшей картинке

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title>demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
  <script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
  <style type='text/css'>
  .min{
    width: 300px;
  }
  #fancybox-inner {
    display: none;
  }

  </style>
<script type='text/javascript'>
$(function(){
 n = 0;
 var arr = [{
            href : '#fancybox-inner',
            title : 'max',
            aspectRatio : false,  fitToView : true
        },{href : '#fancybox-inner',
            title : 'min',
            aspectRatio : true,  fitToView : false
            }]

 $("#fancybox-img, .gallery a").click(function() {
 $("#fancybox-img").toggleClass('min');
 n = ++n%2
 $.fancybox.open(arr[n])

 })



});
</script>
</head>
<body>
<ul>
<li>
		<p class="gallery">
			<a href="#fancybox-inner">
				<span id="selection_index9" class="selection_index"></span>Посмотреть отзыв
			</a>
		</p>
	</li>
	<li>...</li>
	<li>...</li>
	</ul>

<div id="fancybox-wrap" >
	<div id="fancybox-inner" >
		<img id="fancybox-img" src="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_b.jpg">
	</div>
	<a id="fancybox-close" style="display: inline;"></a>
	<a href="javascript:;" id="fancybox-left" style="display: inline;">
		<span class="fancy-ico" id="fancybox-left-ico">
		</span>
	</a>
	<a href="javascript:;" id="fancybox-right" style="display: inline;">
		<span class="fancy-ico" id="fancybox-right-ico">
		</span>
	</a>
	<div id="fancybox-title" class="fancybox-title-inside" style="width: 515px; padding-left: 45px; padding-right: 45px; display: block;">
		<span>Lorem ipsum dolor sit amet
	</span>
	</div>
</div>
</body>
</html>

Артем163 · #7 (**permalink**) 16.04.2014, 17:21

рони, проверил на jsfiddle- скрипт работает, вставил на сайт - по ссылке открывает просто картинку, в консоле пишет:
Resource interpreted as Document but transferred with MIME type image/jpeg

рони · #8 (**permalink**) 16.04.2014, 18:12

Артем163,
смените fancybox на тот что в коде здесь - у вас старая версия

Артем163 · #9 (**permalink**) 17.04.2014, 09:58

рони, я переподключил fancy и вашу версию jQuery- по прежнему эта ошибка и открывается картинка

рони · #10 (**permalink**) 17.04.2014, 10:27

Артем163,
смотреть надо на месте

Форум

Справочник

Discord чат

Курсы javascript