×
Ruby on Rails: постинг твитов через Twitter API (04 нояб 2017)

Практикуемся в Ruby on Rails.

Любимый Плагин jQuery cloud-zoom v1.0.2

Больше
6 года 5 мес. назад - 6 года 5 мес. назад #1 от Aleksej
Aleksej создал эту тему: Плагин jQuery cloud-zoom v1.0.2
Очень интересный плагин jQuery cloud-zoom v1.0.2, позволяющий масштабировать изображение, не открывая его; картинка как-бы под увеличительным стеклом. Наведя курсор мыши на изображение - получаем ее часть, но в ином масштабе. Плагин имеет четыре варианта различных реализаций этого интересного и многообещающего эфффекта - см. демо на странице автора .

Примеры кода для всех четырех вариантов, по порядку:

1. Иначе масштабированная картинка плюс различные миниатюры, нажимая на которые - получаем смену основного изображения.
<div class="zoom-section">    	  
	<div class="zoom-small-image" style="float:left; margin-right:21px; border:4px #CCC solid;">
		<a href='images/bigimage00.jpg' class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4">
			<img src="images/smallimage.jpg" alt='' title="Optional title display">
		</a>
	</div>
	<div class="zoom-desc">      
		<p>
			<a href='images/bigimage00.jpg' class='cloud-zoom-gallery' title='Red' rel="useZoom: 'zoom1', smallImage: 'images/smallimage.jpg' ">
				<img style="border:1px #128CCE solid;" class="zoom-tiny-image" src="images/tinyimage.jpg" alt = "Thumbnail 1"/>
			</a>
			<a href='images/bigimage01.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: ' images/smallimage-1.jpg'">
				<img style="border:1px #128CCE solid;" class="zoom-tiny-image" src="images/tinyimage-1.jpg" alt = "Thumbnail 2"/>
			</a>                  
			<a href='images/bigimage02.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: 'images/smallimage-2.jpg' ">
				<img style="border:1px #128CCE solid;" class="zoom-tiny-image" src="images/tinyimage-2.jpg" alt = "Thumbnail 3"/>
			</a>
		</p>
	</div>
</div>

2. Второй вариант, похожий...
<div class="zoom-section" style="width:248px;">
	<div class="zoom-small-image" style="border:4px #CCC solid;"> 
		<a href='images/bigimage03.jpg' class = 'cloud-zoom' rel="tint: '#ff0000',tintOpacity:0.5 ,smoothMove:5,zoomWidth:480, adjustY:-4, adjustX:10">
			<img src="images/smallimage-3.jpg" title="Optional Title Text" alt=''/>
		</a>
	</div>
</div>

3. Область иначе масштабированного изображения появляется вместо основного:
<div class="zoom-section" style="width:248px;">
	<div class="zoom-small-image" style="border:4px #CCC solid;"> 
		<a href='images/bigimage04.jpg' class = 'cloud-zoom' rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4"> 
			<img src="images/smallimage-4.jpg" title="Your caption here" alt=' '/>
		</a> 
	</div>
</div>

4. Новое изображение открывается где-то в иной части страницы, плюс добавлен эффект размытия:
<div class="zoom-section" style="width:248px;">
	<div class="zoom-small-image" style="border:4px #CCC solid;">
		<a href='images/bigimage01.jpg' class = 'cloud-zoom' title="Your caption here" rel="softFocus: true, position:'anypos', smoothMove:2">       
			<img src="images/smallimage-1.jpg" alt='' />
		</a>
	</div>
	<div class="zoom-desc" style="position:relative; width:248px;">
		<div id="anypos" style="position:absolute;top:-428px; left: 428px;width:256px; height:256px;"></div>
	</div>
</div>

Стили и JS для всех вариантов:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="cloud-zoom.1.0.2.js"></script>
<link href="cloud-zoom.css" rel="stylesheet" type="text/css" />

Плагин совершенно бесплатен и, по заявлению разработчика, работает во всех современных браузерах, и даже в IE6. Скачать можно с нашего сервера , либо со страницы автора.
Последнее редактирование: 6 года 5 мес. назад от Aleksej.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
3 года 7 мес. назад - 3 года 7 мес. назад #2 от serge
serge ответил в теме Плагин jQuery cloud-zoom v1.0.2
Варианты зума от различных разработчиков и живые демки возможно увидеть на нашем сайте.
Вы без проблем сумеете подобрать эффектный zoom для своего блога, выбирайте:

А я смогу! - А поглядим! - А я упрямый!
Последнее редактирование: 3 года 7 мес. назад от serge.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
3 года 6 мес. назад - 3 года 6 мес. назад #3 от Aleksej
Aleksej ответил в теме Плагин jQuery cloud-zoom v1.0.2

serge пишет: Варианты зума от различных разработчиков...

Спасибо, Серый! Еще один zoom в коллекцию, теперь уже от нас. Нативный модуль под Joomla 3.
Последнее редактирование: 3 года 6 мес. назад от Aleksej.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.