Autor Zpráva
qweewq
Profil *
#1 · Zasláno: 5. 1. 2012, 16:38:00
Odpovědět Citovat
Ahoj všichni,
moc všechny, kteří s tím mají zkušenost prosím o radu. Potřeboval bych zprovoznit widget LightBox ze stránek http://jak.seznam.cz/example/widgets/lightbox.
Mám vše nastavené a knihovny vložené tak jak je na stránkách, ale bohužel to pořád nejde, vždy se mi zobrazí jen černý obdelník a v něm fotky viz obrázek. Nevím co mám špatně, nikdy jsem nic z knihoven "neskládal", prosím o radu. Myslím si, že budu mít asi problém v implementaci obrázků do Lightboxu. Na netu jsem hledal manuály a různé navody, vždy jsem jen našel návod k nějakému jednoduchému lightboxu, který nejde moc konfigurovat.
Kod: 
 <title>O mně, Fotograf Lenka Šteflová</title>
  <link rel="stylesheet" type="text/css" href="foto1.css">
  <link rel="stylesheet" type="text/css" href="editor.css">
  <link rel="stylesheet" type="text/css" href="lightbox-horizontal.css">
  <link rel="stylesheet" type="text/css" href="lightbox-vertical.css">
  <link rel="stylesheet" type="text/css" href="lightbox-slideshow.css">
  <script type="text/javascript" src="curvycorners.js"></script>
  <script type="text/javascript" src="menu_curvycorners.js"></script>
  <script type="text/javascript" src="jak_compressed.js"></script>
  <script type="text/javascript" src="icomponents.js"></script>
  <script type="text/javascript" src="lightbox"></script>
  <script type="text/javascript" src="classmaker.js"></script>
  <script type="text/javascript" src="browser.js"></script>
  <script type="text/javascript" src="events.js"></script>
  <script type="text/javascript" src="dom.js"></script>
  <script type="text/javascript" src="signals.js"></script>
  <script type="text/javascript" src="main.js"></script>
  <script type="text/javascript" src="isignals.js"></script>
  <script type="text/javascript" src="window.js"></script>
  <script>
    var data = [
     {alt: 'Západ slunce', small: {url: 'portret01.png'}, big: {url: 'portret01.png'} },
     {alt: 'Praděd', small: {url: 'portret02.png'}, big: {url: 'portret02.png'} },
     {alt: 'Klaustrofobie', small: {url: 'portret03.png'}, big: {url: 'portret03.png'} },
     {alt: 'Přehlídka armády', small: {url: 'portret04.png'}, big: {url: 'portret04.png'} }
 ];


  var opt = {
     useShadow: true,
     galleryId: 'lightBox',
     imagePath: '/img/widgets/lightbox/shadow-',
     components: {
         strip: JAK.LightBox.Strip.Scrollable,
         navigation: JAK.LightBox.Navigation.Basic,
         anchorage: JAK.LightBox.Anchorage.Fixed,
         main: JAK.LightBox.Main.CenteredScaled
     }
 };

 galerie = new JAK.LightBox(data, opt);
  </script>
  </head>
  <body>

 <div  style="margin:0px; padding:0px; width: 1280px; height:70%; background-image:url(pozadi1a.png); background-repeat:no-repeat; background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%;">
          <div  id="lightBox">
          <a href="portret01.png"><img src="portret01.png"width="220" height="150"></a>
          <a href="portret01.png"><img src="portret01.png"width="220" height="150"></a>
          <a href="portret01.png"><img src="portret01.png"width="220" height="150"></a>
          </div>

 </body>
</html>





 styl: 

/*uzivatel musi mit na pameti ze chceme videt scrollbar vzdy, proto je nutne ho mit zapnuty a pocitat s jeho sirkou 17px!!!*/
/*tedy sirka galerie musi byt o 17px vice a sirka thmbus pole take, pokud je vse nalezato tak se jedna o vysku*/

 /*rozmery galerie*/
#lightBox                             {background-color: black; width: 920px; height: 462px; padding-top:10px; padding-left: 10px; padding-right: 10px;}
#lightBox .image-browser-image                    {width: 800px; height: 450px; border: 1px solid #333; overflow: hidden; padding: 0px; float: left; position:           relative;}
/*nahledovy pas*/
#lightBox .image-browser-thumbs                    {width: 117px;height: 452px; overflow-y:scroll; float: right;}
#lightBox .image-browser-thumbs table                {border-collapse:separate; border-spacing:3px 3px;}
#lightBox .image-browser-thumbs td                {padding: 0px; border: 1px solid #333;}
#lightBox .image-browser-thumbs .image-browser-thumb-box    {height: 55px; width: 100px; margin: 0px; padding: 0px;}
/*ramecek okolo aktivniho nahledu*/
#lightBox .image-browser-active                    {border: 3px solid red;}

 /*zasednuti pod galerii*/
div.image-browser-root                         { _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/widgets/lightbox/bg.png', sizingMethod='scale' );}
div[class~="image-browser-root"]                 { background: url(/img/widgets/lightbox/bg.png); }

 /*ovladaci tlacitka*/
#lightBox .image-browser-prev                     { position: absolute; top: 20px; left: 20px; display: block; width: 42px; height: 36px; cursor: pointer; background: url(/img/widgets/lightbox/lb-previous-active.png); _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/widgets/lightbox/lb-previous-active.png'));}
#lightBox .image-browser-prev:hover                { background: url(/img/widgets/lightbox/lb-previous-hover.png); _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/widgets/lightbox/lb-previous-hover.png')); }
#lightBox .image-browser-next                     { position: absolute; top: 20px; left: 66px; display: block; width: 42px; height: 36px; cursor: pointer; background: url(/img/widgets/lightbox/lb-next-active.png); _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/widgets/lightbox/lb-next-active.png')); }
#lightBox .image-browser-next:hover                { background: url(/img/widgets/lightbox/lb-next-hover.png); _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/widgets/lightbox/lb-next-hover.png')); }
#lightBox .image-browser-prev-disabled                { position: absolute; top: 20px; left: 20px; display: block; width: 42px; height: 36px; cursor: pointer; background: url(/img/widgets/lightbox/lb-previous-inactive.png); _background: none;  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/widgets/lightbox/lb-previous-inactive.png')); }
#lightBox .image-browser-next-disabled                { position: absolute; top: 20px; left: 66px; display: block; width: 42px; height: 36px; cursor: pointer; background: url(/img/widgets/lightbox/lb-next-inactive.png); _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/widgets/lightbox/lb-next-inactive.png')); }
#lightBox .image-browser-close                    { position: absolute; top: 20px; left: 760px; display: block; width: 42px; height: 36px; cursor: pointer; background: url(/img/widgets/lightbox/lb-close-active.png); _background:none ;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/widgets/lightbox/lb-close-active.png'));}
#lightBox .image-browser-close:hover                { background: url(/img/widgets/lightbox/lb-close-hover.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/widgets/lightbox/lb-close-hover.png'));}
Jelc
Profil *
#2 · Zasláno: 5. 1. 2012, 17:03:05
Odpovědět Citovat
Rozhodně by se hodil odkaz na živou ukázku, ale i z toho co tu je napastované je vidět, že máte ve stránce spoustu souborů vložených opakovaně (obsahuje je i jak_compressed.js) , tím pádem vám JAK nemůže fungovat korektně. Pokud používáte komprimovaného JAKa, potřebujete kromě javascriptů a css lightboxu pouze 

    icomponents.js
    window.js
    timekeeper.js
    interpolator.js

vložené v tomto pořadí za jak_compressed.js a před javascripty lightboxu, potom je možné ladit dále.
qweewq
Profil *
#3 · Zasláno: 5. 1. 2012, 17:43:45 · Upravil/a: Moderátor (editace znemožněna) o 5 minut později
Odpovědět Citovat
moc díky za radu, ale bohužel, žádná změna. Prosím vás nevíte jestli mám dobře tu implementace Lightboxu do stránky. Z domovských stránek jsem vyrozuměl, že stačí divu s obrazky přiřadit id=lightBox. Nevím jestli je to dobře. Zkusím to hodit na net, kdyžtak to sem hodim. Prozatím přikládám trochu validnější kód, pošlu ho sem radši celej:

Moderátor panther: Odmazán kilometr a půl kódu.
panther
Profil
#4 · Zasláno: 5. 1. 2012, 17:49:11
Odpovědět Citovat
dodej odkaz na web, asi tisíc řádků kódu nikdo za tebe zkoumat nebude. Pokud chceš vložit kód, vyber z něj to podstatné.
qweewq
Profil *
#5 · Zasláno: 5. 1. 2012, 17:55:56
Odpovědět Citovat
Na živých stránkách už dělám.
podstatný pro chod Lightboxu co mám v kodu je jen:
V tom mim stylu je teda ještě vložen styl lightboxu 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>O mně, Fotograf Lenka Šteflová</title>
  <link rel="stylesheet" type="text/css" href="foto1.css">
  <link rel="stylesheet" type="text/css" href="editor.css">
  <link rel="stylesheet" type="text/css" href="lightbox-horizontal.css">
  <link rel="stylesheet" type="text/css" href="lightbox-vertical.css">
  <link rel="stylesheet" type="text/css" href="lightbox-slideshow.css">
  <script type="text/javascript" src="curvycorners.js"></script>
  <script type="text/javascript" src="menu_curvycorners.js"></script>
  <script type="text/javascript" src="jak_compressed.js"></script>
  <script type="text/javascript" src="icomponents.js"></script>
  <script type="text/javascript" src="window.js"></script>
  <script type="text/javascript" src="timekeeper.js"></script>
  <script type="text/javascript" src="interpolator.js"></script>
  <script type="text/javascript" src="lightbox.js"></script>
  <script>
    var data = [
     {alt: 'Západ slunce', small: {url: 'portret01.png'}, big: {url: 'portret01.png'} },
     {alt: 'Praděd', small: {url: 'portret02.png'}, big: {url: 'portret02.png'} },
     {alt: 'Klaustrofobie', small: {url: 'portret03.png'}, big: {url: 'portret03.png'} },
     {alt: 'Přehlídka armády', small: {url: 'portret04.png'}, big: {url: 'portret04.png'} }
 ];


  var opt = {
     useShadow: true,
     galleryId: 'lightBox',
     imagePath: '/img/widgets/lightbox/shadow-',
     components: {
         strip: JAK.LightBox.Strip.Scrollable,
         navigation: JAK.LightBox.Navigation.Basic,
         anchorage: JAK.LightBox.Anchorage.Fixed,
         main: JAK.LightBox.Main.CenteredScaled
     }
 };

 galerie = new JAK.LightBox(data, opt);
  </script>
  </head>
  <body>
    
           <div  id="lightBox">
          <a href="portret01.png"><img src="portret01.png"width="220" height="150"></a>
          <a href="portret01.png"><img src="portret01.png"width="220" height="150"></a>
          <a href="portret01.png"><img src="portret01.png"width="220" height="150"></a>
          </div>
  </body>
</html>
qweewq
Profil *
#6 · Zasláno: 5. 1. 2012, 20:56:29
Odpovědět Citovat
tak tady posílám odkaz na stránky http://kesala.webz.cz/
Moc budu vděčný pokud se mi na to někdo podíváte....
Díky
Davex
Profil
#7 · Zasláno: 5. 1. 2012, 22:29:44
Odpovědět Citovat
JAK neznám, takže jen obecně.

Objekt Lightboxu vytváříš v hlavičce, a to v okamžiku, kdy ještě neexistuje blok #lightBox - celý poslední blok <script> přesuň do <body> za blok #lightBox.

Také tam chybí soubor http://kesala.webz.cz/lightbox-vertical.css a všechny obrázky v adresáři http://kesala.webz.cz/img/widgets/lightbox/.
qweewq
Profil *
#8 · Zasláno: 5. 1. 2012, 23:17:50
Odpovědět Citovat
Díky, ale pořád beze změny. Zajímavé je, že jsem zkoušel implementovat do stránky jiný Lightbox konkrétně lightbox2 podle návodu, na oficiálních stránkách http://lokeshdhakar.com/projects/lightbox2/#download, ale taky mi to nejde, tak nevím jestli to není něčím jiným. Kdyžtak to někdo zkuste jestli vám to jde...
Jelc
Profil *
#9 · Zasláno: 6. 1. 2012, 12:27:53
Odpovědět Citovat
Davex:
„Objekt Lightboxu vytváříš v hlavičce, a to v okamžiku, kdy ještě neexistuje blok #lightBox - celý poslední blok <script> přesuň do <body> za blok #lightBox.“

Přesně tím bych začal :-)
qweewq
Profil *
#10 · Zasláno: 6. 1. 2012, 13:04:57 · Upravil/a: qweewq
Odpovědět Citovat
změny uz jsem provedl: http://kesala.webz.cz/ beze změny :( !!


Nějak takto: 

<body>
<div  id="lightBox">
          <a href="portret01.png"><img src="portret01.png"width="220" height="150"></a>
          <a href="portret01.png"><img src="portret01.png"width="220" height="150"></a>
          <a href="portret01.png"><img src="portret01.png"width="220" height="150"></a>
          </div>
          <script>
          var data = [
           {alt: 'Západ slunce', small: {url: 'portret01.png'}, big: {url: 'portret01.png'} },
           {alt: 'Praděd', small: {url: 'portret02.png'}, big: {url: 'portret02.png'} },
           {alt: 'Klaustrofobie', small: {url: 'portret03.png'}, big: {url: 'portret03.png'} },
           {alt: 'Přehlídka armády', small: {url: 'portret04.png'}, big: {url: 'portret04.png'} }
        ];
       
       
         var opt = {
           useShadow: true,
           galleryId: 'lightBox',
           imagePath: '/img/widgets/lightbox/shadow-',
           components: {
               strip: JAK.LightBox.Strip.Scrollable,
               navigation: JAK.LightBox.Navigation.Basic,
               anchorage: JAK.LightBox.Anchorage.Fixed,
               main: JAK.LightBox.Main.CenteredScaled
           }
         };
       
         galerie = new JAK.LightBox(data, opt);
    </script>
    </div>
</body>
Jelc
Profil *
#11 · Zasláno: 6. 1. 2012, 15:43:25 · Upravil/a: Jelc
Odpovědět Citovat
Ve skutečnosti bz měl mít div obalující obrázky jiné id než které používáte jako parametr , např. 

<div  id="gallery">
          <a href="portret01.png"><img src="portret01.png"width="220" height="150"></a>
          <a href="portret01.png"><img src="portret01.png"width="220" height="150"></a>
          <a href="portret01.png"><img src="portret01.png"width="220" height="150"></a>
          </div>

vlastni inicializace lightboxu pak bude vypadat následovně: 

         <script script="type/text-javascript">
     
          var opt = {
           useShadow: true,
           galleryId: 'lightBox',
           imagePath: '/img/widgets/lightbox/shadow-',
           components: {
               strip: JAK.LightBox.Strip.Scrollable,
               navigation: JAK.LightBox.Navigation.Basic,
               anchorage: JAK.LightBox.Anchorage.Fixed,
               main: JAK.LightBox.Main.CenteredScaled
           }
         };
       
         var galerie = JAK.LightBox.create('gallery', opt);
    </script>

objekt data nepotřebujete, protože cestu k velkým obrázkům si lightbox vezme z atributu HREF odkazu, který obaluje náhled v divu gallery (samozřejmně ho musíte správně uvést)


jeste oprava: 
     <script type="text-javascript">
     
           var opt = {
           useShadow: true,
           galleryId: 'lightBox',
           imagePath: '/img/widgets/lightbox/shadow-',
           components: {
               strip: JAK.LightBox.Strip.Scrollable,
               navigation: JAK.LightBox.Navigation.Basic,
               anchorage: JAK.LightBox.Anchorage.Fixed,
               main: JAK.LightBox.Main.CenteredScaled
           }
         };
       
          var galerie = JAK.LightBox.create('gallery', opt);
    </script>
qweewq
Profil *
#12 · Zasláno: 6. 1. 2012, 16:16:48
Odpovědět Citovat
Změny jsem provedl, ale teď zmizelo cerne "okno" - jsou tam jen ty obrázky.....
Jelc
Profil *
#13 · Zasláno: 6. 1. 2012, 16:25:39 · Upravil/a: Jelc
Odpovědět Citovat
To je moje chyba, správný tag pro javascript je 
<script type="text/javascript">



A ještě musím znovu upozornit, že v tomto případě musí být v html, kde jsou definované odkazy s obrázky, v atributu HREF odkazu cesta k velkému obrázku, například takto: 

      <div  id="gallery">
          <a href="cesta_k_velkemu_obrazku/portret01.png"><img src="cesta_k_nahledu/portret01.png"width="220" height="150"></a>
         ...

nebo 

      <div  id="gallery">
          <a href="velky_portret01.png"><img src="maly_portret01.png"width="220" height="150"></a>
         ...

... a tak podobně
qweewq
Profil *
#14 · Zasláno: 6. 1. 2012, 16:38:14
Odpovědět Citovat
SUPERRRRR uz se nějakej zaklad lightboxu objevil - zbytek se uz snad doladi pridanim komponentů a upravou css tak zatím moc díky všem !!! Kdybych měl ještě s tím nějakej problém tak se ozvu :-)
Časová prodleva: 5 let
Capoeira
Profil
#15 · Zasláno: 17. 2. 2017, 11:31:31
Odpovědět Citovat
pokouším se zprovoznit lightbox na nově vznikající stránce ale bohužel s ním nemám vůbec žádné zkušenosti. Použil jsem kód ze stránky, kterou mi takto udělal známý, ale nedaří se mi. 
<a href="foto/_MG_0942.jpg" data-lightbox = "rodinna-hrobka" title = "Rodinná hrobka Černých". 
    <img border="0" src="foto/_MG_0942-m.jpg"></a></td>
Když přepíšu data-lightbox, tak mi už nejde pohlížet fotky za sebou. Nevíte prosím co s tím, kde to upravit? web.rademic.cz/index.htm
Keeehi
Profil
#16 · Zasláno: 17. 2. 2017, 12:04:08
Odpovědět Citovat
Capoeira:
„pokouším se zprovoznit lightbox na nově vznikající stránce“
A co ti nefunguje? Mně se ty fotky v lightboxu zobrazí.
Capoeira
Profil
#17 · Zasláno: 17. 2. 2017, 13:08:44
Odpovědět Citovat
to ano, ale jakmile přejmenuju data-lightbox = "rodinna-hrobka" na cokoliv jiného, tak nelze mezi těmi fotografiemi přepínat na další.. nechápu proč
Kajman
Profil
#18 · Zasláno: 17. 2. 2017, 13:16:29
Odpovědět Citovat
Tím atributem se zpravidla určuje, které fotky patří k sobě (tedy se listuje jen mezi těmi, které mají stejnou hodnotu jako rozkliknutá fotka).
Keeehi
Profil
#19 · Zasláno: 17. 2. 2017, 15:15:30
Odpovědět Citovat
Capoeira:
Musíš to přejmenovat u všech fotek co patří k sobě na stejnou hodnotu. Nevím, na co se to snažíš přepsat, ale kdyby to náhodou stále nefungovalo tak to zkus bez diakritiky a mezer. Mimochodem, je vlastně skoro jedno co je v tomto atributu, protože to není nikde vidět.
Časová prodleva: 8 dní
Capoeira
Profil
#20 · Zasláno: 25. 2. 2017, 18:51:15
Odpovědět Citovat
moc díky už to funguje i po přejmenování (jen musí být stejné)
Keeehi
Profil
#21 · Zasláno: 26. 2. 2017, 17:18:10
Odpovědět Citovat
Capoeira:
„jen musí být stejné“
Tak to je přece základ. Jak jinak by ta gelerie poznala, jaké obrázky patří k sobě?
Časová prodleva: 4 roky
Capoeira
Profil
#22 · Zasláno: 23. 7. 2021, 08:18:06
Odpovědět Citovat
Prosím poradil by mi někdo proč obrázky otevírané přes
lightbox umístěný na této stránce www.jezcivkleci.cz/index.htm se neotevírají nahoře, ale je vždy nutné o něco srolovat, aby se dalo najít pop up okno? Moc děkuji!
lionel messi
Profil
#23 · Zasláno: 23. 7. 2021, 16:50:31
Odpovědět Citovat
Capoeira:

1. Ideálne je založiť si vlastné vlákno a nepísať tam, kde sa rieši cudzí, iba veľmi vzdialene podobný problém.

2. Otvoril by som si vývojárske nástroje. Máš tam okrem iného toto: 

<div id="lightbox" class="lightbox" style="display: block; top: 1177.8px; left: 0px;">

Všimni si, že to číslo máš pre každý obrázok iné. K tomu si nájdi kus js kódu, ktorý ti určuje túto pozíciu.
Časová prodleva: 4 dny
Kajman
Profil
#24 · Zasláno: 27. 7. 2021, 10:13:09
Odpovědět Citovat
Capoeira:
Protože tam máte 8 let starou verzi lightboxu. Stáhněte aktuální verzi, kde by to mělo být opravené.
github.com/lokesh/lightbox2/releases
Časová prodleva: 10 dní
Capoeira
Profil
#25 · Zasláno: 6. 8. 2021, 06:41:10 · Upravil/a: Capoeira o 14 minut později
Odpovědět Citovat
Kajman:
ok, díky moc!


lionel messi:
díky, přes nástroje jsem do toho nahlédl, je tam vidět kód co uvádíš, ale to dělá jen ten script, který dle mého upravovat nemohu. V html editoru ta část kódu vidět není. Zkusím to předělat na novější verzi lightboxu, jak mi radil Kajman. Díky!


lionel messi:
nahlédnout mohu jen do souboru lightbox ve složce JS, ale nemám tušení co bych tam měl opravit: 

(function(){var b,d,c;b=jQuery;c=(function(){function b(){this.fadeDuration=500;this.fitImagesInViewport=true;this.resizeDuration=700;this.showImageNumberLabel=true;this.wrapAround=false}b.prototype.albumLabel=function(b,c){return"Image "+b+" of "+c};return b})();d=(function(){function c(b){this.options=b;this.album=[];this.currentImageIndex=void 0;this.init()}c.prototype.init=function(){this.enable();return this.build()};c.prototype.enable=function(){var c=this;return b('body').on('click','a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]',function(d){c.start(b(d.currentTarget));return false})};c.prototype.build=function(){var c=this;b("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div>").appendTo(b('body'));this.$lightbox=b('#lightbox');this.$overlay=b('#lightboxOverlay');this.$outerContainer=this.$lightbox.find('.lb-outerContainer');this.$container=this.$lightbox.find('.lb-container');this.containerTopPadding=parseInt(this.$container.css('padding-top'),10);this.containerRightPadding=parseInt(this.$container.css('padding-right'),10);this.containerBottomPadding=parseInt(this.$container.css('padding-bottom'),10);this.containerLeftPadding=parseInt(this.$container.css('padding-left'),10);this.$overlay.hide().on('click',function(){c.end();return false});this.$lightbox.hide().on('click',function(d){if(b(d.target).attr('id')==='lightbox'){c.end()}return false});this.$outerContainer.on('click',function(d){if(b(d.target).attr('id')==='lightbox'){c.end()}return false});this.$lightbox.find('.lb-prev').on('click',function(){if(c.currentImageIndex===0){c.changeImage(c.album.length-1)}else{c.changeImage(c.currentImageIndex-1)}return false});this.$lightbox.find('.lb-next').on('click',function(){if(c.currentImageIndex===c.album.length-1){c.changeImage(0)}else{c.changeImage(c.currentImageIndex+1)}return false});return this.$lightbox.find('.lb-loader, .lb-close').on('click',function(){c.end();return false})};c.prototype.start=function(c){var f,e,j,d,g,n,o,k,l,m,p,h,i;b(window).on("resize",this.sizeOverlay);b('select, object, embed').css({visibility:"hidden"});this.$overlay.width(b(document).width()).height(b(document).height()).fadeIn(this.options.fadeDuration);this.album=[];g=0;j=c.attr('data-lightbox');if(j){h=b(c.prop("tagName")+'[data-lightbox="'+j+'"]');for(d=k=0,m=h.length;k<m;d=++k){e=h[d];this.album.push({link:b(e).attr('href'),title:b(e).attr('title')});if(b(e).attr('href')===c.attr('href')){g=d}}}else{if(c.attr('rel')==='lightbox'){this.album.push({link:c.attr('href'),title:c.attr('title')})}else{i=b(c.prop("tagName")+'[rel="'+c.attr('rel')+'"]');for(d=l=0,p=i.length;l<p;d=++l){e=i[d];this.album.push({link:b(e).attr('href'),title:b(e).attr('title')});if(b(e).attr('href')===c.attr('href')){g=d}}}}f=b(window);o=f.scrollTop()+f.height()/10;n=f.scrollLeft();this.$lightbox.css({top:o+'px',left:n+'px'}).fadeIn(this.options.fadeDuration);this.changeImage(g)};c.prototype.changeImage=function(f){var d,c,e=this;this.disableKeyboardNav();d=this.$lightbox.find('.lb-image');this.sizeOverlay();this.$overlay.fadeIn(this.options.fadeDuration);b('.lb-loader').fadeIn('slow');this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();this.$outerContainer.addClass('animating');c=new Image();c.onload=function(){var m,g,h,i,j,k,l;d.attr('src',e.album[f].link);m=b(c);d.width(c.width);d.height(c.height);if(e.options.fitImagesInViewport){l=b(window).width();k=b(window).height();j=l-e.containerLeftPadding-e.containerRightPadding-20;i=k-e.containerTopPadding-e.containerBottomPadding-110;if((c.width>j)||(c.height>i)){if((c.width/j)>(c.height/i)){h=j;g=parseInt(c.height/(c.width/h),10);d.width(h);d.height(g)}else{g=i;h=parseInt(c.width/(c.height/g),10);d.width(h);d.height(g)}}}return e.sizeContainer(d.width(),d.height())};c.src=this.album[f].link;this.currentImageIndex=f};c.prototype.sizeOverlay=function(){return b('#lightboxOverlay').width(b(document).width()).height(b(document).height())};c.prototype.sizeContainer=function(f,g){var b,d,e,h,c=this;h=this.$outerContainer.outerWidth();e=this.$outerContainer.outerHeight();d=f+this.containerLeftPadding+this.containerRightPadding;b=g+this.containerTopPadding+this.containerBottomPadding;this.$outerContainer.animate({width:d,height:b},this.options.resizeDuration,'swing');setTimeout(function(){c.$lightbox.find('.lb-dataContainer').width(d);c.$lightbox.find('.lb-prevLink').height(b);c.$lightbox.find('.lb-nextLink').height(b);c.showImage()},this.options.resizeDuration)};c.prototype.showImage=function(){this.$lightbox.find('.lb-loader').hide();this.$lightbox.find('.lb-image').fadeIn('slow');this.updateNav();this.updateDetails();this.preloadNeighboringImages();this.enableKeyboardNav()};c.prototype.updateNav=function(){this.$lightbox.find('.lb-nav').show();if(this.album.length>1){if(this.options.wrapAround){this.$lightbox.find('.lb-prev, .lb-next').show()}else{if(this.currentImageIndex>0){this.$lightbox.find('.lb-prev').show()}if(this.currentImageIndex<this.album.length-1){this.$lightbox.find('.lb-next').show()}}}};c.prototype.updateDetails=function(){var b=this;if(typeof this.album[this.currentImageIndex].title!=='undefined'&&this.album[this.currentImageIndex].title!==""){this.$lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast')}if(this.album.length>1&&this.options.showImageNumberLabel){this.$lightbox.find('.lb-number').text(this.options.albumLabel(this.currentImageIndex+1,this.album.length)).fadeIn('fast')}else{this.$lightbox.find('.lb-number').hide()}this.$outerContainer.removeClass('animating');this.$lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration,function(){return b.sizeOverlay()})};c.prototype.preloadNeighboringImages=function(){var c,b;if(this.album.length>this.currentImageIndex+1){c=new Image();c.src=this.album[this.currentImageIndex+1].link}if(this.currentImageIndex>0){b=new Image();b.src=this.album[this.currentImageIndex-1].link}};c.prototype.enableKeyboardNav=function(){b(document).on('keyup.keyboard',b.proxy(this.keyboardAction,this))};c.prototype.disableKeyboardNav=function(){b(document).off('.keyboard')};c.prototype.keyboardAction=function(g){var d,e,f,c,b;d=27;e=37;f=39;b=g.keyCode;c=String.fromCharCode(b).toLowerCase();if(b===d||c.match(/x|o|c/)){this.end()}else if(c==='p'||b===e){if(this.currentImageIndex!==0){this.changeImage(this.currentImageIndex-1)}}else if(c==='n'||b===f){if(this.currentImageIndex!==this.album.length-1){this.changeImage(this.currentImageIndex+1)}}};c.prototype.end=function(){this.disableKeyboardNav();b(window).off("resize",this.sizeOverlay);this.$lightbox.fadeOut(this.options.fadeDuration);this.$overlay.fadeOut(this.options.fadeDuration);return b('select, object, embed').css({visibility:"visible"})};return c})();b(function(){var e,b;b=new c();return e=new d(b)})}).call(this);
Časová prodleva: 3 roky

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

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

0