Талисман
ФОРУМ КАМИНИ • Виж темата - Ефект Лупа за сайт


ФОРУМ КАМИНИ

форум за камини и нещата наоколо
Дата и час: Май 23rd, 2018, 9:15 am

Часовете са според зоната UTC + 2 часа



stan

ars


Напиши нова тема Отговори на тема  [ 1 мнение ] 
Автор Съобщение
МнениеПубликувано на: Април 30th, 2013, 11:28 am 
Site Admin

Регистриран на: Ноември 4th, 2011, 8:45 pm
Мнения: 670
http://www.dynamicdrive.com/dynamicinde ... zoomer.htm


Step 1: Add the below code inside the <HEAD> section of the page:

Код:
<link rel="stylesheet" href="multizoom.css" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script type="text/javascript" src="multizoom.js">

// Featured Image Zoomer (w/ optional multizoom and adjustable power)- By Dynamic Drive DHTML code library (www.dynamicdrive.com)
// Multi-Zoom code (c)2012 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
// Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more

</script>

<script type="text/javascript">

jQuery(document).ready(function($){

   $('#image1').addimagezoom({ // single image zoom
      zoomrange: [3, 10],
      magnifiersize: [300,300],
      magnifierpos: 'right',
      cursorshade: true,
      largeimage: 'hayden.jpg' //<-- No comma after last option!
   })


   $('#image2').addimagezoom() // single image zoom with default options
   
   $('#multizoom1').addimagezoom({ // multi-zoom: options same as for previous Featured Image Zoomer's addimagezoom unless noted as '- new'
      descArea: '#description', // description selector (optional - but required if descriptions are used) - new
      speed: 1500, // duration of fade in for new zoomable images (in milliseconds, optional) - new
      descpos: true, // if set to true - description position follows image position at a set distance, defaults to false (optional) - new
      imagevertcenter: true, // zoomable image centers vertically in its container (optional) - new
      magvertcenter: true, // magnified area centers vertically in relation to the zoomable image (optional) - new
      zoomrange: [3, 10],
      magnifiersize: [250,250],
      magnifierpos: 'right',
      cursorshadecolor: '#fdffd5',
      cursorshade: true //<-- No comma after last option!
   });
   
   $('#multizoom2').addimagezoom({ // multi-zoom: options same as for previous Featured Image Zoomer's addimagezoom unless noted as '- new'
      descArea: '#description2', // description selector (optional - but required if descriptions are used) - new
      disablewheel: true // even without variable zoom, mousewheel will not shift image position while mouse is over image (optional) - new
            //^-- No comma after last option!   
   });
   
})

</script>



The above code references two external files plus a loading gif, which you should download below (right click, and select "Save As"):

multizoom.js
multizoom.css
Изображение

samplepics.zip (all the images that make up the demo referenced inside code of Step 2 below, for testing purposes).
Inside the .js file, you may wish to edit the below two variables near the top:

Код:
loadinggif: 'spinningred.gif', //full path or URL to "loading" gif
magnifycursor: 'crosshair', //Value for CSS's 'cursor' attribute, added to original image


Step 2: Insert the below sample code into the BODY section of your page, which shows 3 featured image zoomers:

Код:
<h3>Demo 1:</h3>

<img id="image1" border="0" src="haydensmall.jpg" style="width:250px;height:338px">




<h3>Demo 2:</h3>

<img id="image2" border="0" src="listenmusic.jpg" style="width:200px;height:150px">




<h3>Demo 3:</h3>

<div class="targetarea" style="border:1px solid #eee"><img id="multizoom1" alt="zoomable" title="" src="millasmall.jpg"/></div>
<div id="description">Milla Jojovitch</div>
<div class="multizoom1 thumbs">
<a href="millasmall.jpg" data-large="milla.jpg" data-title="Milla Jojovitch"><img src="milla_tmb.jpg" alt="Milla" title=""/></a>
<a href="saleensmall.jpg" data-lens="false" data-magsize="150,150" data-large="saleen.jpg" data-title="Saleen S7 Twin Turbo"><img src="saleen_tmb.jpg" alt="Saleen" title=""/></a>
<a href="haydensmall.jpg" data-large="hayden.jpg" data-title="Hayden Panettiere"><img src="hayden_tmb.jpg" alt="Hayden" title=""/></a>
<a href="jaguarsmall.jpg" data-large="jaguar.jpg" data-title="Jaguar Type E"><img src="jaguar_tmb.jpg" alt="Jaguar" title=""/></a>
</div>




<h3>Demo 4:</h3>

<div class="targetarea diffheight"><img id="multizoom2" alt="zoomable" title="" src="angelinasmall.jpg"/></div>
<div id="description2">Angelina Jolie</div>
<div class="multizoom2 thumbs">
<a href="angelinasmall.jpg" data-large="angelina.jpg" data-title="Angelina Jolie"><img src="angelina_tmb.jpg" alt="Angelina" title=""/></a>
<a href="saleensmall.jpg" data-large="saleen.jpg" data-title="Saleen S7 Twin Turbo"><img src="saleen_tmb.jpg" alt="Saleen" title=""/></a>
<a href="jaguarsmall.jpg" data-large="jaguar.jpg" data-title="Jaguar Type E"><img src="jaguar_tmb.jpg" alt="Jaguar" title=""/></a>
<a href="listenmusic.jpg" data-title="Relaxing Music" data-dims="300, 225"><img src="listen_tmb.jpg" alt="Relaxing Music" title=""/></a>
</div>


Now that you have the script installed on your page, it's time to learn how to set everything up to your liking. In general you can have two types of featured image zooms- 1) single image zoom where it's just a standalone image with zoom capability, or 2) multi-image zoom where a series of small thumbnails each load up a midsized image when clicked on, with the midsized image having the zoom capability. Lets see how you would set these up.

_________________
Изображение
камини - http://www.zidkam.com


Върнете се в началото
 Профил  
 
Покажи мненията от миналия:  Сортирай по  
Напиши нова тема Отговори на тема  [ 1 мнение ] 

Часовете са според зоната UTC + 2 часа


Вие не можете да пускате нови теми
Вие не можете да отговаряте на теми
Вие не можете да променяте собственото си мнение
Вие не можете да изтривате собствените си мнения
Вие не можете да прикачвате файл

cron
Powered by phpBB® Forum Software © phpBB Group

Zidkam


Камини,Барбекю,Пещи
http://zidkam.com/


stan