NOVINKA: Kurz Práca s umelou inteligenciou teraz už od 0 €. Staň sa žiadaným profesionálom. Zisti viac:
FINÁLNY VÝPREDAJ KREDITOV na ITnetwork je tu. Využi poslednú šancu a získaj až 80 % extra kreditov ZADARMO na náš interaktívny e-learning. Zisti viac:

jQuery - fullscreen galéria

Triviálne jQuery plug-in, ktorý vytvorí galériu cez celú stránku. Automaticky zmenšuje alebo zväčšíte obrázok na pozadí. Je to skôr základ pre nejakú zložitejšie galériu, tak dúfam, že sa skript využije. Licencia je MIT.

Použitie 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>

Galéria


 

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 1412x (3.79 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

 

Všetky články v sekcii
JavaScriptu zdrojákoviště - jQuery
Program pre vás napísal Drahomír Hanák
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
Autor v současné době studuje Informatiku. Zajímá se o programování, matematiku a grafiku.
Aktivity