Bun venit pe Forumul Andrei

Daca vezi aceasta pagina inseamna ca nu ai cont sau nu esti logat.
Daca doresti doar sa vizualizezi forumul poti apasa pe "x-ul" din dreapta si acesta imagine nu va mai fi afisata.

Pentru o vizualizare cat mai buna a acestui forum recomandam
8
Va uram o zi buna in continuare si o navigare cat mai placuta pe acest forum !


   
AcasaSustineFAQInregistrareConectareCautareCalendar
Twitter



Demo Image Bubbles effect

Navigare :: Scripturi si tutoriale :: Scripturi
AutorMesaj
 nick
avatar
Rang: Administrator


MesajSubiect: Demo Image Bubbles effect Lun Sept 06, 2010 12:31 am  
Primul cod cuprinde imgbubbles.css si imgbubbles.js

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

<link href="http://forumulandrei.webs.com/Image%20Bubbles%20effect/imgbubbles.css" rel="stylesheet" type="text/css" />

<style type="text/css">

/*CSS for 2 demos on the page*/
#orbs li{
width: 65px; /*width of image container. Should be wider than contained images (before bubbling) */
height:60px; /*height of image container. Should be taller than contained images (before bubbling) */
}

#orbs li img{
width: 55px; /*width of each image before bubbling*/
height: 60px; /*height of each image*/
}

#squares li{
width: 45px; /*width of image container. Must be wider than contained images (before bubbling) */
height:40px; /*height of image container. Must be taller than contained images (before bubbling) */
}

#squares li img{
width: 31px; /*width of each image before bubbling*/
height: 31px; /*height of each image*/
}

</style>

<script type="text/javascript" src="http://forumulandrei.webs.com/Image%20Bubbles%20effect/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>

Pentru functionarea codului folositi pe linga codul postat mai sus urmatorul cod :

Pentru 2.5x magnification folosesti urmatorul cod:

Cod:
<h4>2.5x magnification</h4>
<ul id="squares" class="bubblewrap">
<li><a href="#"><img src="http://i66.servimg.com/u/f66/11/96/49/61/twitte10.png" alt="Add to Twitter" /></a></li>
<li><a href="#"><img src="http://i66.servimg.com/u/f66/11/96/49/61/facebo10.png" alt="Add to Facebook" /></a></li>
<li><a href="#"><img src="http://i66.servimg.com/u/f66/11/96/49/61/delici10.png" alt="Add to Delicious" /></a></li>
<li><a href="#"><img src="http://i66.servimg.com/u/f66/11/96/49/61/digg10.png" alt="Add to Digg" /></a></li>
<li><a href="#"><img src="http://i66.servimg.com/u/f66/11/96/49/61/reddit10.png" alt="Add Reddit" /></a></li>
<li><a href="#"><img src="http://i66.servimg.com/u/f66/11/96/49/61/yahoo10.png" alt="Add to Yahoo" /></a></li>
</ul>

Pentru 1.75x magnification vei folosi urmatorul cod
Cod:
<h4>1.75x magnification</h4>
<ul id="orbs" class="bubblewrap">
<li><a href="#"><img src="http://i66.servimg.com/u/f66/11/96/49/61/twitte10.png" alt="Add to Twitter" /></a></li>
<li><a href="#"><img src="http://i66.servimg.com/u/f66/11/96/49/61/facebo10.png" alt="Add to Facebook" /></a></li>
<li><a href="#"><img src="http://i66.servimg.com/u/f66/11/96/49/61/delici10.png" alt="Add to Delicious" /></a></li>
<li><a href="#"><img src="http://i66.servimg.com/u/f66/11/96/49/61/digg10.png" alt="Add to Digg" /></a></li>
<li><a href="#"><img src="http://i66.servimg.com/u/f66/11/96/49/61/reddit10.png" alt="Add Reddit" /></a></li>
<li><a href="#"><img src="http://i66.servimg.com/u/f66/11/96/49/61/yahoo10.png" alt="Add to Yahoo" /></a></li>
</ul>



[Trebuie sa fiti inscris si conectat pentru a vedea acest link]


Ultima editare efectuata de catre nick in Lun Dec 20, 2010 8:42 am, editata de 2 ori
 George130
avatar
Rang: Prieten

Respetarea regulilor 100%

MesajSubiect: Re: Demo Image Bubbles effect Vin Oct 29, 2010 9:07 am  
Tare, am cautat mult acest cod multumesc
 emanuel
avatar
Rang: Prieten

Respetarea regulilor 100%

MesajSubiect: Re: Demo Image Bubbles effect Sam Noi 20, 2010 8:00 am  
Frumos !
 Continut sponsorizat
Rang:


MesajSubiect: Re: Demo Image Bubbles effect  

*Scrie romaneste
*Sterg mesajele inutile sau scrise cu CAPS
*Nu fa spam
*Linkurile relevante în context sunt binevenite.

Transferul se face din contul dumnevoastra de Paypal




Copyright © 2008-2014 Forumul Andrei. Toate drepturile rezervate. Termeni si conditii
Aspect creat si codat de Alexandru Miron & Nick

.