jQuery - fullscreen galerie

JavaScript jQuery Zdrojákoviště jQuery - fullscreen galerie

Triviální jQuery plug-in, který vytvoří galerii přes celou stránku. Automaticky zmenšuje nebo zvětšije obrázek na pozadí. Je to spíš základ pro nějakou složitější galerii, tak doufám, že se skript využije. Licence je MIT.

Použití plug-inu

<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="gallery.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
      $('#gallery')
          .gallery({  })
          .css({ top: ($(this).height()-130), left: 50 });

      $('#gallery img')
          .mouseover(function() {
              $(this).stop().animate({ width: 200, height: 130, marginTop: -50, marginLeft: -25 });
          })
          .mouseout(function() {
              $(this).stop().animate({ width: 150, height: 80, marginTop: 0, marginLeft: 0 });
          });
  });

  $(window).resize(function() {
      $('#gallery').css({ top: ($(this).height()-130), left: 50 });
  });
  </script>
</head>
<body>
  <!-- Gallery images -->
  <div id="gallery">
    <a href="javascript:;" title="Landscape Wallpaper"><img src="images/landscape.jpg" alt="Landscape Wallpaper" width="150" height="80" /></a>
    <a href="javascript:;" title="Landscape Wallpaper"><img src="images/landscape2.jpg" alt="Landscape Wallpaper" width="150" height="80" /></a>
    <a href="javascript:;" title="Landscape Wallpaper"><img src="images/landscape3.jpg" alt="Landscape Wallpaper" width="150" height="80" /></a>
    <a href="javascript:;" title="Landscape Wallpaper"><img src="images/landscape4.jpg" alt="Landscape Wallpaper" width="150" height="80" /></a>
    <a href="javascript:;" title="Landscape Wallpaper"><img src="images/landscape5.jpg" alt="Landscape Wallpaper" width="150" height="80" /></a>
  </div>

  <!-- Current -->
  <div id="image"><img src="images/landscape.jpg" /></div>
</body>
</html>

Galerie


 

Stáhnout

Staženo 1277x (3.79 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

  Aktivity (1)

Program pro vás napsal Drahomír Hanák
Avatar
Autor v současné době studuje Informatiku. Zajímá se o programování, matematiku a grafiku.

Jak se ti líbí článek?
Celkem (1 hlasů) :
55555


 


Miniatura
Všechny články v sekci
JavaScript zdrojákoviště - jQuery

 

 

Komentáře
Zobrazit starší komentáře (2)

Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Koukáš, co? A prý že JS nepotřebuješ :P

Odpovědět 30.7.2012 20:24
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na David Čápka
Daniel Vítek:

no nepotřebuji,když budu něco potřebovat,tak to seženu na IS,a mnohokrát lepší :P :) :) ]:>

 
Odpovědět 30.7.2012 20:41
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na Daniel Vítek
Daniel Vítek:

nejede ti smajlík Soul_Draco :D

 
Odpovědět 30.7.2012 20:41
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Daniel Vítek
David Čápka:

Je to opravené v nové verzi IS, kterou brzy nasadíme ;-)

Odpovědět 30.7.2012 22:04
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
 
Odpovědět 31.7.2012 7:40
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na David Čápka
Daniel Vítek:

Tak se ukázalo že to nebyla nová verze IS ale první verze devbook :D

 
Odpovědět 3.9.2012 17:31
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Daniel Vítek
David Čápka:

O změně domény se uvažovalo delší dobu, ale v tu chvíli co jsem to psal ještě devbook nebyl. Napadlo mě to nějak těsně předtím, než jsme to dopsali.

Odpovědět 3.9.2012 17:40
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
TEX
Člen
Avatar
TEX:

Ahoj, dělám stránky v html 5, zatím nepoužívám ani php, a něják mi uniká jak to mám naistalovat jelikož se v ostatních jazycích nevyznám. Jak to tedy použít ? Díky ;)

 
Odpovědět 12.9.2014 12:33
Avatar
tomasmanhal
Člen
Avatar
tomasmanhal:

Jednoduše opiš ten zdrojový kód nahoře :-) tzn, javascriptovou část do hlavičky a pak si tam v HTML části nasázíš obrázky jaké potřebuješ :-) A nezapomeň si stáhnout ten gallery.js a uložit do kořenového adresáře webu :-)

Odpovědět 12.9.2014 13:16
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Marek Šimon
Člen
Avatar
Odpovídá na tomasmanhal
Marek Šimon:

Ako mam zmenit velkost obrazkov? Zobrazuje sa mi to v uplnej velkosti povodnych obrazkov a tie su cez 3000x2000. Skusal som tam pomenit tie hodny tych % v gallery.js, ale nic sa nezmenilo.
Chcem aktualny zobrazeny obrazok dat na stred a s medzerami od krajov.
A tak isto sa mi nezobrazuje dole ten landscape, ale hore a tam mam zafixovanu listu, cize sa to prekryva...

 
Odpovědět 10.12.2015 12:42
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 12. Zobrazit vše