Na és itt a demó:

1.75x Nagyítással

2.5x Nagyítással

Ezt persze nem csak ezekkel a képekkel tudod használni. Mindkét kódrészletet be kell illesztened abba a modulba, ahova szeretnéd, hogy megjelenlen. Íme a kód:

A script:

 

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

<p>

&nbsp;</p>

<p>

<link href="http://www.dynamicdrive.com/dynamicindex4/imgbubbles.css" rel="stylesheet" type="text/css" />

<style type="text/css">

/*CSS for 2 demos on the page*/

#orbs li{

width: 65px; 

height:60px;

}

 

#orbs li img{

width: 55px; 

height: 60px;

}

 

#squares li{

width: 45px; /

height:40px; 

}

 

#squares li img{

width: 31px; 

height: 31px; 

} </style>

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex4/imgbubbles.js">

 

 

 

</script><script type="text/javascript">

 

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

$('ul#orbs').imgbubbles({factor:1.75}) //add bubbles effect to UL id="orbs"

$('ul#squares').imgbubbles({factor:2.5}) //add bubbles effect to UL id="squares"

})

 

</script></p>

 

<h4>

1.75x Nagyítással</h4>

<ul class="bubblewrap" id="orbs">

<li>

<a href="URL CÍMET IDE"><img alt="Kövess Facebookon" src="KÉPED URL CÍME IDE" /></a></li>

<li>

<a href="URL CÍMET IDE"><img alt="Kövess Facebookon" src="KÉPED URL CÍME IDE" /></a></li>

</ul>

 

<h4>

2.5x Nagyítással</h4>

<ul class="bubblewrap" id="squares">

<li>

<a href="URL CÍMET IDE"><img alt="Kövess Facebookon" src="KÉPED URL CÍME IDE" /></a></li>

<li>

<a href="URL CÍMET IDE"><img alt="Kövess Facebookon" src="KÉPED URL CÍME IDE" /></a></li>

</ul>

Ennyi lenne az egész. Remélem, hogy tudtam vele segíteni! ;)