Autor Zpráva
qweewq
Profil *
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 *
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 *
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
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 *
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 *
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
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 *
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 *
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 *
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 *
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 *
Změny jsem provedl, ale teď zmizelo cerne "okno" - jsou tam jen ty obrázky.....
Jelc
Profil *
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 *
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 :-)
Capoeira
Profil
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
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
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
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
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.
Capoeira
Profil
moc díky už to funguje i po přejmenování (jen musí být stejné)
Keeehi
Profil
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ě?

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: