Scriptek | Kép effek | Kép effek 34

        Válaszd ki a megjeleníteni kívánt scriptet!    

---

    Demo : Képek nagyíthatók ez egérrel.

Nagyítás 3x, időtartam=0.5 másogperc:

Nagyítás 3.5x, időtartam=0.5 másodperc:

A képet kiválasztva nagyítja:

Kiválasztasz egy Képet és kattintasz, hogy növekedjen Amsterdam 1 Amsterdam 2 Amsterdam 3 Amsterdam 4

    INFO:
    

A fenti kód hivatkozik két külső fájlra melyeket neked le kellene töltened lent (jobb click, és kiválasztod "Mentés másképpen;):

• jquery.magnifier.js
• magnify.cur (egyedi nagyítókép-kurzor IE bögészőkhöz)

---

    Kód: Head része

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.magnifier.js"> /*********************************************** * jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script>

    Head részbe másold .

---

    Kód: Body része

 

<p align="left"> <p align="left"><img border="0" src="images/listenmusic.jpg" width="200" height="150" class="magnify"></p> <p align="left"><strong>Nagyítás 3.5x, időtartam=0.5 másodperc:</strong></p> <p align="left"> <img border="0" src="images/pool.jpg" width="150" height="108" class="magnify" /> <img border="0" src="images/cave.jpg" width="150" height="108" class="magnify" /> <img border="0" src="images/autumn.jpg" width="150" height="108" class="magnify" /></p> <p align="left"> <b>A képet kiválasztva nagyítja:</b></p> <p align="left"> <!--webbot bot="HTMLMarkup" startspan --><form style="padding:0; margin:0"> <select id="imageselect" style="margin-bottom:5px"> <option>Kiválasztasz egy Képet és kattintasz, hogy növekedjen</option> <option>Amsterdam 1</option> <option>Amsterdam 2</option> <option>Amsterdam 3</option> <option>Amsterdam 4</option> </select> </form> <img id="imagebox" src="images/amster1.jpg" class="magnify" data-magnifyby="3" style="width:200px" /> <script type="text/javascript"> var imagebox=document.getElementById("imagebox") var imageselect=document.getElementById("imageselect") var imagelist=["images/amster1.jpg", "images/amster2.jpg", "images/amster3.jpg", "images/amster4.jpg"] imageselect.onchange=function(){ if (this.selectedIndex!=0){ imagebox.src=imagelist[this.selectedIndex-1] jQuery(imagebox).imageMagnify({ magnifyby: 2 }) } } </script>

    Body részbe másold ahol szeretnéd, hogy megjelenjen .