php photo gallery with lightbox

Σε αυτή την περιοχή μπορείτε να βρείτε ή να αναζητήσετε πληροφορίες σχετικές με την PHP

Συντονιστές: WebDev Moderators, Super-Moderators, PHP Moderators

sakas16v
Δημοσιεύσεις: 69
Εγγραφή: 04 Νοέμ 2007 21:18
Τοποθεσία: evros

php photo gallery with lightbox

Δημοσίευση από sakas16v » 25 Σεπ 2008 02:19

Παιδιά σας ευχαριστώ που προσπαθήσατε να με βοηθήσετε αλλά δεν μπόρεσα να βγάλω άκρη. Πρέπει να κάνω χοντρή μαλ…..!!! Δεν αντέχω άλλο τα παρατάω με το θέμα lightbox!!:(
Ξέρει κανείς κάποια άλλη εφαρμογή που να είναι λίγο ποίο εύκολη???




_______________
www.oinoh.eu

Άβαταρ μέλους
Banavas
Script Master
Δημοσιεύσεις: 1367
Εγγραφή: 21 Νοέμ 2004 20:25
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από Banavas » 25 Σεπ 2008 09:37

Φίλε sakas16v,
το lightbox είναι από τις πλέον έυκολες εφαρμογές. Μην τα παρατάς τόσο εύκολα.
Κατέβασε το script και προσπάθησε να κάνεις να παίξει το παράδειγμα όπως είναι χωρίς να πειράξεις τίποτε. Έπειτα αντικαθιστάς σιγά σιγά και δοκιμάζοντας κείμενα εικόνες και μορφοποίηση μέχρι να το φέρεις στα μέτρα σου.
Προχώρα βήμα βήμα, βάζε και τον κώδικα εδώ να τον βλέπουμε ώστε να μπορούμε να σε βοηθάμε περισσότερο.
Happy coding....
Μάρκος
http://lasernet.gr

sakas16v
Δημοσιεύσεις: 69
Εγγραφή: 04 Νοέμ 2007 21:18
Τοποθεσία: evros

php photo gallery with lightbox

Δημοσίευση από sakas16v » 29 Σεπ 2008 17:29

Φίλε Banavas
Με τα λόγια σου ¨Μην τα παρατάς τόσο εύκολα¨ μ έκανες να πεισμώσω και να μην τα παρατήσω και σ ευχαριστώ γι αυτό ακλουθώντας την συμβουλή σου έκανα πολλά και διάφορα πειράματα και ενώ στο local publish λειτουργούν όλα ρολόι όταν ώμος την δημοσιεύω δεν λειτουργεί τίποτα. Γι αυτό θέλω την βοήθεια σου.

lightbox.js

Κώδικας: Επιλογή όλων


	Lightbox JS: Fullsize Image Overlays 
	by Lokesh Dhakar - http://www.huddletogether.com

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

	Script featured on Dynamic Drive code library Jan 24th, 06':
	http://www.dynamicdrive.com

	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&#40;yScroll < windowHeight&#41;&#123;
		pageHeight = windowHeight;
	&#125; else &#123; 
		pageHeight = yScroll;
	&#125;

	// for small pages with total width less then width of the viewport
	if&#40;xScroll < windowWidth&#41;&#123;	
		pageWidth = windowWidth;
	&#125; else &#123;
		pageWidth = xScroll;
	&#125;


	arrayPageSize = new Array&#40;pageWidth,pageHeight,windowWidth,windowHeight&#41; 
	return arrayPageSize;
&#125;


//
// pause&#40;numberMillis&#41;
// Pauses code execution for specified time. Uses busy code, not good.
// Code from http&#58;//www.faqts.com/knowledge_base/view.phtml/aid/1602
//
function pause&#40;numberMillis&#41; &#123;
	var now = new Date&#40;&#41;;
	var exitTime = now.getTime&#40;&#41; + numberMillis;
	while &#40;true&#41; &#123;
		now = new Date&#40;&#41;;
		if &#40;now.getTime&#40;&#41; > exitTime&#41;
			return;
	&#125;
&#125;

//
// getKey&#40;key&#41;
// Gets keycode. If 'x' is pressed then it hides the lightbox.
//

function getKey&#40;e&#41;&#123;
	if &#40;e == null&#41; &#123; // ie
		keycode = event.keyCode;
	&#125; else &#123; // mozilla
		keycode = e.which;
	&#125;
	key = String.fromCharCode&#40;keycode&#41;.toLowerCase&#40;&#41;;
	
	if&#40;key == 'x'&#41;&#123; hideLightbox&#40;&#41;; &#125;
&#125;


//
// listenKey&#40;&#41;
//
function listenKey &#40;&#41; &#123;	document.onkeypress = getKey; &#125;
	

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

	
	var arrayPageSize = getPageSize&#40;&#41;;
	var arrayPageScroll = getPageScroll&#40;&#41;;

	// center loadingImage if it exists
	if &#40;objLoadingImage&#41; &#123;
		objLoadingImage.style.top = &#40;arrayPageScroll&#91;1&#93; + &#40;&#40;arrayPageSize&#91;3&#93; - 35 - objLoadingImage.height&#41; / 2&#41; + 'px'&#41;;
		objLoadingImage.style.left = &#40;&#40;&#40;arrayPageSize&#91;0&#93; - 20 - objLoadingImage.width&#41; / 2&#41; + 'px'&#41;;
		objLoadingImage.style.display = 'block';
	&#125;

	// set height of Overlay to take up whole page and show
	objOverlay.style.height = &#40;arrayPageSize&#91;1&#93; + 'px'&#41;;
	objOverlay.style.display = 'block';

	// preload image
	imgPreload = new Image&#40;&#41;;

	imgPreload.onload=function&#40;&#41;&#123;
		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&#91;1&#93; + &#40;&#40;arrayPageSize&#91;3&#93; - 35 - imgPreload.height&#41; / 2&#41;;
		var lightboxLeft = &#40;&#40;arrayPageSize&#91;0&#93; - 20 - imgPreload.width&#41; / 2&#41;;
		
		objLightbox.style.top = &#40;lightboxTop < 0&#41; ? "0px" &#58; lightboxTop + "px";
		objLightbox.style.left = &#40;lightboxLeft < 0&#41; ? "0px" &#58; lightboxLeft + "px";


		objLightboxDetails.style.width = imgPreload.width + 'px';
		
		if&#40;objLink.getAttribute&#40;'title'&#41;&#41;&#123;
			objCaption.style.display = 'block';
			//objCaption.style.width = imgPreload.width + 'px';
			objCaption.innerHTML = objLink.getAttribute&#40;'title'&#41;;
		&#125; else &#123;
			objCaption.style.display = 'none';
		&#125;
		
		// 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 &#40;navigator.appVersion.indexOf&#40;"MSIE"&#41;!=-1&#41;&#123;
			pause&#40;250&#41;;
		&#125; 

		if &#40;objLoadingImage&#41; &#123;	objLoadingImage.style.display = 'none'; &#125;
		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&#40;&#41;;
		objOverlay.style.height = &#40;arrayPageSize&#91;1&#93; + 'px'&#41;;
		
		// Check for 'x' keypress
		listenKey&#40;&#41;;

		return false;
	&#125;

	imgPreload.src = objLink.href;
	
&#125;





//
// hideLightbox&#40;&#41;
//
function hideLightbox&#40;&#41;
&#123;
	// get objects
	objOverlay = document.getElementById&#40;'overlay'&#41;;
	objLightbox = document.getElementById&#40;'lightbox'&#41;;

	// hide lightbox and overlay
	objOverlay.style.display = 'none';
	objLightbox.style.display = 'none';
	
	// disable keypress listener
	document.onkeypress = '';
&#125;




//
// initLightbox&#40;&#41;
// 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&#40;&#41;
&#123;
	
	if &#40;!document.getElementsByTagName&#41;&#123; return; &#125;
	var anchors = document.getElementsByTagName&#40;"a"&#41;;

	// loop through all anchor tags
	for &#40;var i=0; i<anchors.length; i++&#41;&#123;
		var anchor = anchors&#91;i&#93;;

		if &#40;anchor.getAttribute&#40;"href"&#41; && &#40;anchor.getAttribute&#40;"rel"&#41; == "lightbox"&#41;&#41;&#123;
			anchor.onclick = function &#40;&#41; &#123;showLightbox&#40;this&#41;; return false;&#125;
		&#125;
	&#125;

	// the rest of this code inserts html at the top of the page that looks like this&#58;
	//
	// <div id="overlay">
	//		<a href="#" onclick="hideLightbox&#40;&#41;; return false;"><img id="loadingImage" /></a>
	//	</div>
	// <div id="lightbox">
	//		<a href="#" onclick="hideLightbox&#40;&#41;; 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&#40;"body"&#41;.item&#40;0&#41;;
	
	// create overlay div and hardcode some functional styles &#40;aesthetic styles are in CSS file&#41;
	var objOverlay = document.createElement&#40;"div"&#41;;
	objOverlay.setAttribute&#40;'id','overlay'&#41;;
	objOverlay.onclick = function &#40;&#41; &#123;hideLightbox&#40;&#41;; return false;&#125;
	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&#40;objOverlay, objBody.firstChild&#41;;
	
	var arrayPageSize = getPageSize&#40;&#41;;
	var arrayPageScroll = getPageScroll&#40;&#41;;

	// preload and create loader image
	var imgPreloader = new Image&#40;&#41;;
	
	// if loader image found, create link to hide lightbox and create loadingimage
	imgPreloader.onload=function&#40;&#41;&#123;

		var objLoadingImageLink = document.createElement&#40;"a"&#41;;
		objLoadingImageLink.setAttribute&#40;'href','#'&#41;;
		objLoadingImageLink.onclick = function &#40;&#41; &#123;hideLightbox&#40;&#41;; return false;&#125;
		objOverlay.appendChild&#40;objLoadingImageLink&#41;;
		
		var objLoadingImage = document.createElement&#40;"img"&#41;;
		objLoadingImage.src = loadingImage;
		objLoadingImage.setAttribute&#40;'id','loadingImage'&#41;;
		objLoadingImage.style.position = 'absolute';
		objLoadingImage.style.zIndex = '150';
		objLoadingImageLink.appendChild&#40;objLoadingImage&#41;;

		imgPreloader.onload=function&#40;&#41;&#123;&#125;;	//	clear onLoad, as IE will flip out w/animated gifs

		return false;
	&#125;

	imgPreloader.src = loadingImage;

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

	// preload and create close button image
	var imgPreloadCloseButton = new Image&#40;&#41;;

	// if close button image found, 
	imgPreloadCloseButton.onload=function&#40;&#41;&#123;

		var objCloseButton = document.createElement&#40;"img"&#41;;
		objCloseButton.src = closeButton;
		objCloseButton.setAttribute&#40;'id','closeButton'&#41;;
		objCloseButton.style.position = 'absolute';
		objCloseButton.style.zIndex = '200';
		objLink.appendChild&#40;objCloseButton&#41;;

		return false;
	&#125;

	imgPreloadCloseButton.src = closeButton;

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

	// create caption
	var objCaption = document.createElement&#40;"div"&#41;;
	objCaption.setAttribute&#40;'id','lightboxCaption'&#41;;
	objCaption.style.display = 'none';
	objLightboxDetails.appendChild&#40;objCaption&#41;;

	// create keyboard message
	var objKeyboardMsg = document.createElement&#40;"div"&#41;;
	objKeyboardMsg.setAttribute&#40;'id','keyboardMsg'&#41;;
	objKeyboardMsg.innerHTML = 'press <kbd>x</kbd> to close';
	objLightboxDetails.appendChild&#40;objKeyboardMsg&#41;;


&#125;




//
// addLoadEvent&#40;&#41;
// Adds event to window.onload without overwriting currently assigned onload functions.
// Function found at Simon Willison's weblog - http&#58;//simon.incutio.com/
//
function addLoadEvent&#40;func&#41;
&#123;	
	var oldonload = window.onload;
	if &#40;typeof window.onload != 'function'&#41;&#123;
    	window.onload = func;
	&#125; else &#123;
		window.onload = function&#40;&#41;&#123;
		oldonload&#40;&#41;;
		func&#40;&#41;;
		&#125;
	&#125;

&#125;



addLoadEvent&#40;initLightbox&#41;;	// run initLightbox onLoad


lightbox.css





Κώδικας: Επιλογή όλων



#lightbox&#123;
	background-color&#58;#eee;
	padding&#58; 10px;
	border-bottom&#58; 2px solid #666;
	border-right&#58; 2px solid #666;
	&#125;
#lightboxDetails&#123;
	font-size&#58; 0.8em;
	padding-top&#58; 0.4em;
	&#125;	
#lightboxCaption&#123; float&#58; left; &#125;
#keyboardMsg&#123; float&#58; right; &#125;
#closeButton&#123; top&#58; 5px; right&#58; 5px; &#125;

#lightbox img&#123; border&#58; none; clear&#58; both;&#125; 
#overlay img&#123; border&#58; none; &#125;

#overlay&#123; background-image&#58; url&#40;overlay.png&#41;; &#125;

* html #overlay&#123;
	background-color&#58; #333;
	back\ground-color&#58; transparent;
	filter&#58; progid&#58;DXImageTransform.Microsoft.AlphaImageLoader&#40;src="overlay.png", sizingMethod="scale"&#41;;
	&#125;
	


Αυτοί είναι οι κώδικες που δίνει η σελίδα. Πρέπει να κάνω κάποιες αλλαγές σ αυτούς? Αν ναι ποιες? Και πού τους τοποθετώ αυτούς τους κώδικες??
Για να τα πάρουμε ένα ένα και σιγά σιγά γιατί δεν πρόκειται να βγάλω άκρη!!!





_____________________
www.oinoh.eu

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από vassilism » 29 Σεπ 2008 17:57

Φίλε sakas έχεις κάνει τα εύκολα δύσκολα.
Τα πράγματα είναι πολύ απλά.
Σου επισυνάπτω τον φάκελο lightbox.
Κατέβασέ τον, κάνε unzip και στην συνέχεια κοίτα το αρχείο demo.html.
Αυτό το αρχείο το έφτιαξα εγώ (δεν υπήρχε στον φάκελο του lightbox).

Και αναλυτικά έκανα τα εξής:
1 Έφτιαξα ένα νέο αρχείο htlm και το ονόμασα demo.
2 Στο <head> έβαλα:

Κώδικας: Επιλογή όλων

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js"></script>
2 Στο <body> έβαλα:

Κώδικας: Επιλογή όλων

<a href="1.jpg" rel="lightbox" title="Caption- cute cat!"><img src="1.jpg" width="100" height="87" border="0" /></a>
<a href="2.jpg" rel="lightbox" title="Caption- cute cat!"><img src="2.jpg" width="100" height="87" border="0" /></a>
Δηλαδή 2 εικόνες που τις κάνω link.

Και ένα demo εδώ

p.s: Αυτό είναι το μηχανάκι που είχα πιτσιρικάς :P
Συνημμένα
lightbox.zip
(426.78 KiB) Μεταφορτώθηκε 484 φορές

Άβαταρ μέλους
Banavas
Script Master
Δημοσιεύσεις: 1367
Εγγραφή: 21 Νοέμ 2004 20:25
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από Banavas » 29 Σεπ 2008 18:16

Ακολούθησε τις οδηγίες του Βασίλη και αν παρ' όλα αυτά δεν καταφέρεις να το κάνεις να τρέξει δημοσίευσε τη σελίδα στην οποία υπάρχουν τα links προς τις εικόνες.

Όπως τα δίνει ο Βασίλης προυποτίθεται οτι όλα τα αρχεία βρίσκονται στο ιδιο directory. Αν είναι αλλού πρέπει να διορθωθούν αντίστοιχα τα links.
Happy coding....
Μάρκος
http://lasernet.gr

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13307
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από EneMe » 30 Σεπ 2008 15:09

Διαβάζω τόση ώρα κι έχω χαζέψει...

Να το ρωτήσω απλά:

Γίνεται το script να αναγνωρίζει ποιά είναι η max διάσταση της εικόνας και να δημιουργεί την μικρογραφία βάση αυτής, διατηρώντας τις αναλογίες;

Πχ, για μικρογραφία max διάστασης 100pixels:
Μια εικόνα 500x100 να δώσει μικρογραφία 100x20.
Mια εικόνα 800x1000 να δώσει μικρογραφία 80x100.

Δηλαδή να μην δηλώνω εγώ βάση ποιας διάστασης θα βγει η μικρογραφία, να το επιλέγει μόνο του το script...

Sorry αν έχει αναφερθεί, αλλά βλέπω διάσπαρτους κώδικες στο θέμα κι έχω πελαγώσει... :(

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από vassilism » 30 Σεπ 2008 18:12

Το αρχικό script που έχω δώσει δουλεύει έτσι ακριβώς με την διαφορά ότι δίνει τη σωστή αναλογία του ύψους σύμφωνα με το πλάτος.
Το πλάτος της μικρογραφίας το δηλώνεις εσύ στο script.

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13307
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από EneMe » 30 Σεπ 2008 19:36

Aκριβώς!

Σκοπός είναι να μην δηλώνω εγώ "πλάτος" ή "ύψος"...

Να αποφασίζει το script ποιά είναι η μεγαλύτερη διάσταση και βάση αυτής να μικραίνει την αρχική εικόνα...

angelwitch83
Δημοσιεύσεις: 194
Εγγραφή: 14 Μάιος 2009 19:43
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από angelwitch83 » 07 Δεκ 2009 15:09

Χρησιμοποιω και εγω το lightbox αλλα εχω το εξης προβλημα
Ενω σε ολους τους browser ολα παιζουν ρολοι, στους IE (6,7,8) δεν φορτωνουν τα loading, closelabel.gifs. Προβλημα με το path λογικα δεν υπαρχει αφου με Firefox,Opera,Google Chrome ολα εμφανιζονται κανονικα.
Θα τρελαθω!!!

angelwitch83
Δημοσιεύσεις: 194
Εγγραφή: 14 Μάιος 2009 19:43
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από angelwitch83 » 07 Δεκ 2009 15:35

Αναφερομαι στο lightbox 2.04 που κυκλοφορει

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από vassilism » 07 Δεκ 2009 17:48

Σίγουρα πρόβλημα με το path είναι. Κοίτα που είναι το css και δήλωσέ το ανάλογα.
Ο IE τρώει τέτοια κολλήματα. Μερικές φορές φτιάχνω άλλο αρχείο για css για ΙΕ.

angelwitch83
Δημοσιεύσεις: 194
Εγγραφή: 14 Μάιος 2009 19:43
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από angelwitch83 » 07 Δεκ 2009 17:53

Το path ειναι σωστο το χω τσεκαρει στο lightbox.js. Τα gifακια αυτα δεν φορτωνονται εξαλλου απο το css αλλα απο το js αρχειάκι. Είναι δυνατόν να ειναι λαθος το path και να δούλευε στους άλλους browsers? Ειμαι αρχαρια στο θεμα αλλα πιστευω αν ηταν προβλημα με το path δε θα επαιζε στους αλλους browsers.
Τα gif βρισκονται σε ξεχωριστο φακελο images (έξω απο τον φακελο js) και τα javascript αρχεια σε ξεχωριστο φακελο js. Το path στο lightbox.js το χω δηλωσει

Κώδικας: Επιλογή όλων

fileLoadingImage&#58;              'images/loading.gif',     
fileBottomNavCloseImage&#58; 'images/closelabel.gif'
το αφησα ως ειχε δηλαδη...σωστο φαινεται...θα τρελαθω πραγματικα

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από vassilism » 07 Δεκ 2009 18:09

Χρησιμοποιείς το lightbox μόνο του ή μαζί με το script που έχω δώσει?
Έτσι δοκίμασες να το κάνεις?

Κώδικας: Επιλογή όλων

fileLoadingImage&#58;        '../images/loading.gif',      
fileBottomNavCloseImage&#58; '../images/closelabel.gif' 

angelwitch83
Δημοσιεύσεις: 194
Εγγραφή: 14 Μάιος 2009 19:43
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από angelwitch83 » 07 Δεκ 2009 18:13

Πρωτα απ ολα σ ευχαριστω πολυ για το ενδιαφερον. Δευτερον δοκιμασα το lightbox μονο του, οχι το δικο σου.
Δοκιμασα να το κανω και ετσι οπως λες αλλα τιποτα...τζιφος

angelwitch83
Δημοσιεύσεις: 194
Εγγραφή: 14 Μάιος 2009 19:43
Επικοινωνία:

php photo gallery with lightbox

Δημοσίευση από angelwitch83 » 07 Δεκ 2009 18:16

Συγκεκριμενα αντι για το gif ο ΙΕ μου βγαζει αυτο το κλασσικο εικονιδιο με το κοκκινο Χ στο λευκο πλαισιο
Και κατι αλλο που προσεξα τωρα...το loading.gif φορτωνει και το close οχι...

Απάντηση

Επιστροφή στο “PHP Προγραμματισμός”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 2 επισκέπτες