Problemy s Lightbox JS

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod Barell 18. 1. 2008 19:14

Zdravim,

za ucelom publikovania svojich fotiek som si cez program Lightbox JS Web Gallery Generator vygenereroval galerie, ktore som potom zaclenil do svojej stranky http://www.photosbyme.ic.cz/fotky.html

Problem je ale v tom, ze ked sa fotky "otvaraju" (najprv su biele, potom sa ta biela vytrati a fotka je plne viditelna) tak niekedy ta biela overlay vrstva sa uplne nestrati a fotka je moc biela... Stava sa to najma cez internet explorer a pri pomalsich pripojeniach...

Vie mi niekto z vas poradit ze ako to odstranit?

PS: co sa tyka pisania web stranok, mam len velmi obmedzene zaklady tak poprosim nejak polopate vysvetlit :) dakujem
Barell
Junior

Odeslat příspěvekod Barell 21. 1. 2008 09:37

nikto s pluginom Lightbox nema skusenosti?
Barell
Junior

Odeslat příspěvekod lurk3r 21. 1. 2008 14:11

s tím těžko něco uděláš, je to javascriptovej skript, kterej to takhle vykresluje, řešení je upravit ten skript, někde je v něm asi nějaká chybka, což ty asi těžko uděláš...
Moderátor diskuzního fóra Živě.cz

If there is no space left on the device, there must be some space right ...
Co říká bezpečnostní software chycenému červovi? "Jsi zatčen! A nezkoušej na mě žádný fork()y!"
lurk3r
VIP uživatel
Uživatelský avatar

Odeslat příspěvekod hicotech 21. 1. 2008 15:07

najlepsie by bolo keby si sem hodil kod toho skriptu.. ono kody su vsetky najedno kopyto :D
skusime tam nieco najst..

btw.. cim to fotis? to asi nebude obycajny digital nie?
Posted by Hicotech
hicotech
Junior

Odeslat příspěvekod Barell 24. 1. 2008 13:15

no takze tu je uvod stranky default

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>lazisko</title>
<meta name="Generator" content="Pranas.NET Web Gallery Creator">
<script src="lightbox/js/prototype.js" type="text/javascript"></script>
<script src="lightbox/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="lightbox/js/lightbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen">
<link rel="stylesheet" href="library/thumbs.css" type="text/css">
</head>
<body>
<div id='divWG'>
<table id="tblThumbsLayout" cellpadding="0" cellspacing="6">
<tr>
<td id='topCell' colspan='4'>
<div id='divNav'><a id='linkHome' href='../fotky.html'>Home</a> &gt; <span id='currentGalleryLocation'>lazisko</span></div>
<table id='tblGalleryName' cellpadding=0 cellspacing=0 border=0 width="100%">
<tr>
<td id='galleryNameCell'>lazisko</td>
<td id='pagingCell'>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class='tdImg'><a href='photos/lazisko_001.jpg' rel='lightbox[gallery]'><img src="thumbs/lazisko_001.jpg" alt="lazisko_001"></a><br>lazisko_001</td>
<td class='tdImg'><a href='photos/lazisko_002.jpg' rel='lightbox[gallery]'><img src="thumbs/lazisko_002.jpg" alt="lazisko_002"></a><br>lazisko_002</td>
<td class='tdImg'><a href='photos/lazisko_003.jpg' rel='lightbox[gallery]'><img src="thumbs/lazisko_003.jpg" alt="lazisko_003"></a><br>lazisko_003</td>
<td class='tdImg'><a href='photos/lazisko_004.jpg' rel='lightbox[gallery]'><img src="thumbs/lazisko_004.jpg" alt="lazisko_004"></a><br>lazisko_004</td>
</tr>

a toto je na konci
<tr>
<td id='pnCell' colspan='4'>
<a class='pn' href='http://pranas.net/WebGalleryCreator/'>Created using LightBox Web Gallery Generator</a>
</td>
</tr>
</table>
</div>
</body>
</html>

napadlo ma, ze by to mohlo byt aj chybou v samotnom scripte, je tam pouzity lightbox 2.02 a vonku je momentalne 2.03.3 Moze to podla vas byt aj tym?

hicotech: snimky su fotene digitalnou zrkadlovkou Pentax *ist DL a teleobjektivom Sigma 70-300mm F4-5.6 APO DG MACRO, zopar (minumum) tam je aj so setovym objektivom Pentax DA 18-55 F3.5-F5.6 AL
Barell
Junior

Odeslat příspěvekod lurk3r 24. 1. 2008 13:35

tohle neee :mrgreen:
ten skript je tohle:
(viz. http://www.huddletogether.com/projects/lightbox/)
Kód: Vybrat vše
/*
   Lightbox JS: Fullsize Image Overlays
   by Lokesh Dhakar - http://www.huddletogether.com

   For more information on this script, visit:
   http://huddletogether.com/projects/lightbox/

   Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
   (basically, do anything you want, just leave my name and link)
   
   Table of Contents
   -----------------
   Configuration
   
   Functions
   - getPageScroll()
   - getPageSize()
   - pause()
   - getKey()
   - listenKey()
   - showLightbox()
   - hideLightbox()
   - initLightbox()
   - addLoadEvent()
   
   Function Calls
   - addLoadEvent(initLightbox)

*/



//
// Configuration
//

// If you would like to use a custom loading image or close button reference them in the next two lines.
var loadingImage = 'loading.gif';      
var closeButton = 'close.gif';      





//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll(){

   var yScroll;

   if (self.pageYOffset) {
      yScroll = self.pageYOffset;
   } else if (document.documentElement && document.documentElement.scrollTop){    // Explorer 6 Strict
      yScroll = document.documentElement.scrollTop;
   } else if (document.body) {// all other Explorers
      yScroll = document.body.scrollTop;
   }

   arrayPageScroll = new Array('',yScroll)
   return arrayPageScroll;
}



//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){
   
   var xScroll, yScroll;
   
   if (window.innerHeight && window.scrollMaxY) {   
      xScroll = document.body.scrollWidth;
      yScroll = window.innerHeight + window.scrollMaxY;
   } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
      xScroll = document.body.scrollWidth;
      yScroll = document.body.scrollHeight;
   } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
      xScroll = document.body.offsetWidth;
      yScroll = document.body.offsetHeight;
   }
   
   var windowWidth, windowHeight;
   if (self.innerHeight) {   // all except Explorer
      windowWidth = self.innerWidth;
      windowHeight = self.innerHeight;
   } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
      windowWidth = document.documentElement.clientWidth;
      windowHeight = document.documentElement.clientHeight;
   } else if (document.body) { // other Explorers
      windowWidth = document.body.clientWidth;
      windowHeight = document.body.clientHeight;
   }   
   
   // for small pages with total height less then height of the viewport
   if(yScroll < windowHeight){
      pageHeight = windowHeight;
   } else {
      pageHeight = yScroll;
   }

   // for small pages with total width less then width of the viewport
   if(xScroll < windowWidth){   
      pageWidth = windowWidth;
   } else {
      pageWidth = xScroll;
   }


   arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
   return arrayPageSize;
}


//
// pause(numberMillis)
// Pauses code execution for specified time. Uses busy code, not good.
// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
//
function pause(numberMillis) {
   var now = new Date();
   var exitTime = now.getTime() + numberMillis;
   while (true) {
      now = new Date();
      if (now.getTime() > exitTime)
         return;
   }
}

//
// getKey(key)
// Gets keycode. If 'x' is pressed then it hides the lightbox.
//

function getKey(e){
   if (e == null) { // ie
      keycode = event.keyCode;
   } else { // mozilla
      keycode = e.which;
   }
   key = String.fromCharCode(keycode).toLowerCase();
   
   if(key == 'x'){ hideLightbox(); }
}


//
// listenKey()
//
function listenKey () {   document.onkeypress = getKey; }
   

//
// showLightbox()
// Preloads images. Pleaces new image in lightbox then centers and displays.
//
function showLightbox(objLink)
{
   // prep objects
   var objOverlay = document.getElementById('overlay');
   var objLightbox = document.getElementById('lightbox');
   var objCaption = document.getElementById('lightboxCaption');
   var objImage = document.getElementById('lightboxImage');
   var objLoadingImage = document.getElementById('loadingImage');
   var objLightboxDetails = document.getElementById('lightboxDetails');

   
   var arrayPageSize = getPageSize();
   var arrayPageScroll = getPageScroll();

   // center loadingImage if it exists
   if (objLoadingImage) {
      objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px');
      objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px');
      objLoadingImage.style.display = 'block';
   }

   // set height of Overlay to take up whole page and show
   objOverlay.style.height = (arrayPageSize[1] + 'px');
   objOverlay.style.display = 'block';

   // preload image
   imgPreload = new Image();

   imgPreload.onload=function(){
      objImage.src = objLink.href;

      // center lightbox and make sure that the top and left values are not negative
      // and the image placed outside the viewport
      var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2);
      var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2);
      
      objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px";
      objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px";


      objLightboxDetails.style.width = imgPreload.width + 'px';
      
      if(objLink.getAttribute('title')){
         objCaption.style.display = 'block';
         //objCaption.style.width = imgPreload.width + 'px';
         objCaption.innerHTML = objLink.getAttribute('title');
      } else {
         objCaption.style.display = 'none';
      }
      
      // A small pause between the image loading and displaying is required with IE,
      // this prevents the previous image displaying for a short burst causing flicker.
      if (navigator.appVersion.indexOf("MSIE")!=-1){
         pause(250);
      }

      if (objLoadingImage) {   objLoadingImage.style.display = 'none'; }

      // Hide select boxes as they will 'peek' through the image in IE
      selects = document.getElementsByTagName("select");
        for (i = 0; i != selects.length; i++) {
                selects[i].style.visibility = "hidden";
        }

   
      objLightbox.style.display = 'block';

      // After image is loaded, update the overlay height as the new image might have
      // increased the overall page height.
      arrayPageSize = getPageSize();
      objOverlay.style.height = (arrayPageSize[1] + 'px');
      
      // Check for 'x' keypress
      listenKey();

      return false;
   }

   imgPreload.src = objLink.href;
   
}





//
// hideLightbox()
//
function hideLightbox()
{
   // get objects
   objOverlay = document.getElementById('overlay');
   objLightbox = document.getElementById('lightbox');

   // hide lightbox and overlay
   objOverlay.style.display = 'none';
   objLightbox.style.display = 'none';

   // make select boxes visible
   selects = document.getElementsByTagName("select");
    for (i = 0; i != selects.length; i++) {
      selects[i].style.visibility = "visible";
   }

   // disable keypress listener
   document.onkeypress = '';
}




//
// initLightbox()
// Function runs on window load, going through link tags looking for rel="lightbox".
// These links receive onclick events that enable the lightbox display for their targets.
// The function also inserts html markup at the top of the page which will be used as a
// container for the overlay pattern and the inline image.
//
function initLightbox()
{
   
   if (!document.getElementsByTagName){ return; }
   var anchors = document.getElementsByTagName("a");

   // loop through all anchor tags
   for (var i=0; i<anchors.length; i++){
      var anchor = anchors[i];

      if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){
         anchor.onclick = function () {showLightbox(this); return false;}
      }
   }

   // the rest of this code inserts html at the top of the page that looks like this:
   //
   // <div id="overlay">
   //      <a href="#" onclick="hideLightbox(); return false;"><img id="loadingImage" /></a>
   //   </div>
   // <div id="lightbox">
   //      <a href="#" onclick="hideLightbox(); return false;" title="Click anywhere to close image">
   //         <img id="closeButton" />      
   //         <img id="lightboxImage" />
   //      </a>
   //      <div id="lightboxDetails">
   //         <div id="lightboxCaption"></div>
   //         <div id="keyboardMsg"></div>
   //      </div>
   // </div>
   
   var objBody = document.getElementsByTagName("body").item(0);
   
   // create overlay div and hardcode some functional styles (aesthetic styles are in CSS file)
   var objOverlay = document.createElement("div");
   objOverlay.setAttribute('id','overlay');
   objOverlay.onclick = function () {hideLightbox(); return false;}
   objOverlay.style.display = 'none';
   objOverlay.style.position = 'absolute';
   objOverlay.style.top = '0';
   objOverlay.style.left = '0';
   objOverlay.style.zIndex = '90';
   objOverlay.style.width = '100%';
   objBody.insertBefore(objOverlay, objBody.firstChild);
   
   var arrayPageSize = getPageSize();
   var arrayPageScroll = getPageScroll();

   // preload and create loader image
   var imgPreloader = new Image();
   
   // if loader image found, create link to hide lightbox and create loadingimage
   imgPreloader.onload=function(){

      var objLoadingImageLink = document.createElement("a");
      objLoadingImageLink.setAttribute('href','#');
      objLoadingImageLink.onclick = function () {hideLightbox(); return false;}
      objOverlay.appendChild(objLoadingImageLink);
      
      var objLoadingImage = document.createElement("img");
      objLoadingImage.src = loadingImage;
      objLoadingImage.setAttribute('id','loadingImage');
      objLoadingImage.style.position = 'absolute';
      objLoadingImage.style.zIndex = '150';
      objLoadingImageLink.appendChild(objLoadingImage);

      imgPreloader.onload=function(){};   //   clear onLoad, as IE will flip out w/animated gifs

      return false;
   }

   imgPreloader.src = loadingImage;

   // create lightbox div, same note about styles as above
   var objLightbox = document.createElement("div");
   objLightbox.setAttribute('id','lightbox');
   objLightbox.style.display = 'none';
   objLightbox.style.position = 'absolute';
   objLightbox.style.zIndex = '100';   
   objBody.insertBefore(objLightbox, objOverlay.nextSibling);
   
   // create link
   var objLink = document.createElement("a");
   objLink.setAttribute('href','#');
   objLink.setAttribute('title','Click to close');
   objLink.onclick = function () {hideLightbox(); return false;}
   objLightbox.appendChild(objLink);

   // preload and create close button image
   var imgPreloadCloseButton = new Image();

   // if close button image found,
   imgPreloadCloseButton.onload=function(){

      var objCloseButton = document.createElement("img");
      objCloseButton.src = closeButton;
      objCloseButton.setAttribute('id','closeButton');
      objCloseButton.style.position = 'absolute';
      objCloseButton.style.zIndex = '200';
      objLink.appendChild(objCloseButton);

      return false;
   }

   imgPreloadCloseButton.src = closeButton;

   // create image
   var objImage = document.createElement("img");
   objImage.setAttribute('id','lightboxImage');
   objLink.appendChild(objImage);
   
   // create details div, a container for the caption and keyboard message
   var objLightboxDetails = document.createElement("div");
   objLightboxDetails.setAttribute('id','lightboxDetails');
   objLightbox.appendChild(objLightboxDetails);

   // create caption
   var objCaption = document.createElement("div");
   objCaption.setAttribute('id','lightboxCaption');
   objCaption.style.display = 'none';
   objLightboxDetails.appendChild(objCaption);

   // create keyboard message
   var objKeyboardMsg = document.createElement("div");
   objKeyboardMsg.setAttribute('id','keyboardMsg');
   objKeyboardMsg.innerHTML = 'press <a href="#" onclick="hideLightbox(); return false;"><kbd>x</kbd></a> to close';
   objLightboxDetails.appendChild(objKeyboardMsg);


}




//
// addLoadEvent()
// Adds event to window.onload without overwriting currently assigned onload functions.
// Function found at Simon Willison's weblog - http://simon.incutio.com/
//
function addLoadEvent(func)
{   
   var oldonload = window.onload;
   if (typeof window.onload != 'function'){
       window.onload = func;
   } else {
      window.onload = function(){
      oldonload();
      func();
      }
   }

}



addLoadEvent(initLightbox);   // run initLightbox onLoad
Moderátor diskuzního fóra Živě.cz

If there is no space left on the device, there must be some space right ...
Co říká bezpečnostní software chycenému červovi? "Jsi zatčen! A nezkoušej na mě žádný fork()y!"
lurk3r
VIP uživatel
Uživatelský avatar

Odeslat příspěvekod Zdenek.Vecera 26. 1. 2008 09:31

Také jsem se s tímto setkal, pouze ale pod Operou, FF a IE jsou OK.
Zdenek.Vecera
Kolemjdoucí


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků