Autor Zpráva
Sruu007
Profil *
dobrý den, chtěla bych poradit, jak bych udělala toto: http://www.designforfun.com/display.php?id=10
po kliknutí na obrázek se ten obrázek plynule zvětší, po dalším kliknutí se zase změnší.
bude to určitě javascript, ale jako takový mi nefunguje, pokud ho napíšu. Možná k sobě potřebuje nějakou flashovou animaci? jak to udělat?
Moc děkuji.
Sruu007
Profil *
jinak tedy měl by to být tenhle příkaz: onClick="bbcode_thumbnailToggle(this, 500)";
kletely
Profil
Sruu007
Tuším JQuery niečo také dokáže.
Sruu007
Profil *
to vypadá dost složitě..
blaaablaaa
Profil
Sruu007
pres jquery to bude nejjednodussi
zalezi k cemu to chces, pokud na galerii, atd. tak bude vhodnejsi lightbox 2
Sruu007
Profil *
jojo, chci to právě na galerii
Sruu007
Profil *
ale lightbox jsem měla a nelíbil se mi, chtěla jsem si to nakódovat vyloženě jen ten efekt zvětšení, žádné další efekty kolem toho
blaaablaaa
Profil
tak na galerii ten uvedeny zrovna moc neni - rozhodi design cele stranky, navic obrazek zvetsi pouze rozmerove (atributy width a height), takze bys v galerii musela mit nactene uz ty obrazky v puvodni velikosti
srigi
Profil
Sruu007
Nastuduj si jQusery funkciu animate. Ta robi to, ze prechod CSS hodnoty nejakeho elementu, povedzme od 0 do 10 plynulo meni v case.

Takze v tvojom pripade, DIV s obrazkom, nastavis mu nejake rozmery a pomocou funkcie animate() plynulo zmenis width a height na nove hodnoty.
Sruu007
Profil *
aha, dobře, moc děkuji, zkusím to
srigi
Profil
Sruu007
Nedalo mi to a rychlo som to v tom jQuery napisal:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <meta http-equiv="content-language" content="sk" />
 <title>MAS</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

 <style type="text/css">
  #dogy {
    width:360px;
    height:468px;
  }

 </style>

 <script type="text/javascript">
  $(function() {
    $('#dogy').toggle(
        function(){
            $(this).stop().animate({ "width": 670, "height": 870 }, 1500);
        },
        function(){
            $(this).stop().animate({ "width": 360, "height": 468 });
        }
    );
  });
    
 </script>
</head>
<body>
<div id="wrapper">
  <p><img src="image.jpg" alt="dog" id="dogy" /></p>

</div><!-- wrapper -->
</body>
</html>
srigi
Profil
Tu je aj zive demo.
Dranel
Profil
srigi
Nechceš to ještě udělat tak, aby se to roztahovalo rozvoměrně na všechny strany a nerozhazovalo to design (tedy práce s z-indexem asi)? :-)
srigi
Profil
Dranel
Dobra vyzva, ale dnes uz na to nepozrem. Snad zajtra. V hlae uz mam ideu ako to urobit.
srigi
Profil
Tak trocha som dnes popracoval, tu mozete zatial vidiet koncept. Nakoniec by z toho mohol byt pekny jQuery plugin. Osobne by som to rozsiril tak, ze by obrazky boli dva (hlavny a thumb, tak ako je zvykom) a pomocou fnce $.load() by z toho bolo nakoniec nieco na styl highslide.
Nekce sa niekto pripojit?
Dranel
Profil
To už můžeš rovnou udělat lightbox 3 :D
srigi
Profil
Dranel
To už můžeš rovnou udělat lightbox 3 :D

A kaslem na to, zase som bol predbehnuty :)
začátečník
Profil *
srigi- mě to přijde super, pomohlo mi to, jen mi to nefunguje na víc obrázku vedle sebe, vždycky funguje jen ten první :(

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0