PDA

Volledige versie bekijken : lightbox include werkt niet


firewing
%Europe/Berlin %481 %2007, 12:33
Beste mensen,

Ik ben bezig met een website bouwen voor mijn band en heb wat hulp nodig met een scriptje.
Lightbox kent iedereen hier wel denk ik. Nou heb ik een versie gevonden die automatisch thumbnails maakt en vervolgens dus van een folder een volledige tabel met thumbnails maakt die dan vergroot worden met de lightbox script.

Volgens de Read Me, Moet je dit doen met een iframe

Nou bestaat mijn site uit html met css en php. Er zit een div op de index pagina die wordt geladen d.m.v. een if {...} (include"...") regel.

Mijn probleem is, ik wil niet de index pagina naar een andere pagina laten gaan waar vervolgens weer een iframe in zit (omweg). Dus heb ik op een pics pagina die word geladen in index een include command gezet die verwijst naar pics.php (de basis van de gallery waar de rel links in staan voor de scripts (js)).
Maar zelfs met de genoemde rel commands die verplicht zijn bovenaan de pagina waar de script instaat, worden de plaatjes alleen vergroot en niet volgens de script??? Hoe kan dit?

ziet er zo uit: http://graham.firewings.net/cyanidesite/?sec=pics

Terwijl als ik hem laad via http://graham.firewings.net/cyanidesite/pics/index.html

doet de script het wel zoals je ziet

Ik ben nog redelijk n00b in sites bouwen en heb al wel redelijk wat gedaan maar ben nogsteeds dmv trial and error aan het proberen sites te maken, dus als ik het iets scheef uitleg, excuses.

Hier volgens de codes voor pics.php en index.hmtl om het verschil te zien.
pics.php
<?php
// iFrame Gallery v1.0
// published under GNU GPL License
// developed by MiNiMaG
// contact: minimag@haxxxor.de

$galleryurl = "http://graham.firewings.net/cyanidesite/pics/gallery/"; // WHERE IS THE GALLERY ? (with / at the end)

$linkpictures = "on"; // Link pictures? Press P/N or klick PREV/NEXT to switch through pictures [on/off]
$showpicnames = "on"; // Show picture names? [on/off]
$maxthumb = "100"; // Maximum width/height of thumbnail
// on change: you have to upload all pictures again for resizing

$resize = "on"; // Resize the picture after upload? [on/off]
$maxpicture = "800"; // If resizing is activated: Maximum width/height of picture
// on change: you have to upload all pictures again for resizing
$bgcolor = "000000";
$perline = "6"; // Maximum number of thumbnails per row

$cellbg = "333333"; // Backgroundcolor of the cells
$cellheight = "100"; // Height of a cell
$cellwidth = "100"; // Width of a cell


// The other way to set the style:
// Use GET variables. Usage:
// on loading iframe add ? after pics.php ant then set the variabes
// to add more variables use &
// example : src="./gallery/pics.php?perline=1&bgcolor=0e0e0e&cellbg=00ff00"

IF (isset ($_GET['linkpictures'])) $linkpictures = $_GET['linkpictures'];
IF (isset ($_GET['showpicnames'])) $bgcolor = $_GET['showpicnames'];
IF (isset ($_GET['bgcolor'])) $bgcolor = $_GET['bgcolor'];
IF (isset ($_GET['perline'])) $perline = $_GET['perline'];
IF (isset ($_GET['cellbg'])) $cellbg = $_GET['cellbg'];
IF (isset ($_GET['cellheight'])) $cellheight = $_GET['cellheight'];
IF (isset ($_GET['cellwidth'])) $cellwidth = $_GET['cellwidth'];


// Here is some HTML to change style:
// DON'T CHANGE BODY ONLOAD !!!
?>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://graham.firewings.net/cyanidesite/pics/js/prototype.js"></script>
<script type="text/javascript" src="http://graham.firewings.net/cyanidesite/pics/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://graham.firewings.net/cyanidesite/pics/js/lightbox.js"></script>
<link rel="stylesheet" href="http://graham.firewings.net/cyanidesite/pics/css/lightbox.css" type="text/css" media="screen">
</head>

<body BGCOLOR=#<?PHP echo $bgcolor; ?> LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onload="parent.initLightbox();">

<table border="0" align="center" cellpadding="0" cellspacing="2">


<?PHP

// DON'T CHANGE ANYTHING UNDER THIS LINE !!!
$thumburl = $galleryurl."thumbs/";
$pictureurl = $galleryurl."pictures/";
$folder = "./upload/";

if($folderpointer = opendir($folder))
{
while($picture = readdir($folderpointer))
{
if(!is_dir($picture))
{
$pictures[] = $picture;
}
}
closedir($folderpointer);
}

if (count($pictures) > 0)
{
for($x=0;$x<count($pictures);$x++)
{
$Picturename = str_replace('%20','-',$pictures[$x]);
$Picturefile = "./upload/".$pictures[$x];
$Picturedata = getimagesize($Picturefile);
$OriginalWidth = $Picturedata[0];
$OriginalHeight = $Picturedata[1];
$ThumbnailWidth = $maxthumb;
if($OriginalWidth < $ThumbnailWidth)
{
$ThumbnailWidth=$OriginalWidth;
}
$Scaling = $OriginalWidth/$ThumbnailWidth;
$ThumbnailHeight = intval($OriginalHeight/$Scaling);


If ($OriginalHeight > $OriginalWidth)
{
$ThumbnailHeight = $ThumbnailWidth;
if($OriginalHeight < $ThumbnailHeight)
{
$ThumbnailHeight=$OriginalHeight;
}
$Scaling = $OriginalHeight/$ThumbnailHeight;
$ThumbnailWidth = intval($OriginalWidth/$Scaling);
}
if($Picturedata[2] == 1)
{
$OriginalPicture = ImageCreateFromGIF($Picturefile);
$ThumbnailPicture = ImageCreateTrueColor($ThumbnailWidth, $ThumbnailHeight);
ImageCopyResized($ThumbnailPicture, $OriginalPicture, 0, 0, 0, 0,
$ThumbnailWidth, $ThumbnailHeight, $OriginalWidth, $OriginalHeight);
ImageGIF($ThumbnailPicture, "thumbs/".$Picturename);
}
elseif($Picturedata[2] == 2)
{
$OriginalPicture = ImageCreateFromJPEG($Picturefile);
$ThumbnailPicture = ImageCreateTrueColor($ThumbnailWidth, $ThumbnailHeight);
ImageCopyResized($ThumbnailPicture, $OriginalPicture, 0, 0, 0, 0,
$ThumbnailWidth, $ThumbnailHeight, $OriginalWidth, $OriginalHeight);
ImageJPEG($ThumbnailPicture, "thumbs/".$Picturename);
}
elseif($Picturedata[2] == 3)
{
$OriginalPicture = ImageCreateFromPNG($Picturefile);
$ThumbnailPicture = ImageCreateTrueColor($ThumbnailWidth, $ThumbnailHeight);
ImageCopyResized($ThumbnailPicture, $OriginalPicture, 0, 0, 0, 0,
$ThumbnailWidth, $ThumbnailHeight, $OriginalWidth, $OriginalHeight);
ImagePNG($ThumbnailPicture, "thumbs/".$Picturename);
}
IF ($resize == "on") $ThumbnailWidth = $maxpicture;
ELSE $ThumbnailWidth = $OriginalWidth;

if($OriginalWidth < $ThumbnailWidth)
{
$ThumbnailWidth=$OriginalWidth;
}
$Scaling = $OriginalWidth/$ThumbnailWidth;
$ThumbnailHeight = intval($OriginalHeight/$Scaling);


If ($OriginalHeight > $OriginalWidth)
{
$ThumbnailHeight = $ThumbnailWidth;
if($OriginalHeight < $ThumbnailHeight)
{
$ThumbnailHeight=$OriginalHeight;
}
$Scaling = $OriginalHeight/$ThumbnailHeight;
$ThumbnailWidth = intval($OriginalWidth/$Scaling);
}
if($Picturedata[2] == 1)
{
$OriginalPicture = ImageCreateFromGIF($Picturefile);
$ThumbnailPicture = ImageCreateTrueColor($ThumbnailWidth, $ThumbnailHeight);
ImageCopyResized($ThumbnailPicture, $OriginalPicture, 0, 0, 0, 0,
$ThumbnailWidth, $ThumbnailHeight, $OriginalWidth, $OriginalHeight);
ImageGIF($ThumbnailPicture, "pictures/".$Picturename);
}
elseif($Picturedata[2] == 2)
{
$OriginalPicture = ImageCreateFromJPEG($Picturefile);
$ThumbnailPicture = ImageCreateTrueColor($ThumbnailWidth, $ThumbnailHeight);
ImageCopyResized($ThumbnailPicture, $OriginalPicture, 0, 0, 0, 0,
$ThumbnailWidth, $ThumbnailHeight, $OriginalWidth, $OriginalHeight);
ImageJPEG($ThumbnailPicture, "pictures/".$Picturename);
}
elseif($Picturedata[2] == 3)
{
$OriginalPicture = ImageCreateFromPNG($Picturefile);
$ThumbnailPicture = ImageCreateTrueColor($ThumbnailWidth, $ThumbnailHeight);
ImageCopyResized($ThumbnailPicture, $OriginalPicture, 0, 0, 0, 0,
$ThumbnailWidth, $ThumbnailHeight, $OriginalWidth, $OriginalHeight);
ImagePNG($ThumbnailPicture, "pictures/".$Picturename);
}
unlink($Picturefile);
}
}
$pictures = $empty;
$folder = "./thumbs";

if($folderpointer = opendir($folder))
{
while($picture = readdir($folderpointer))
{
if(!is_dir($picture))
{
$pictures[] = $picture;
}
}

closedir($folderpointer);
}
sort($pictures);
$zaehler = 1;
echo "<tr>";
for($x=0;$x<count($pictures);$x++)
{
IF ($zaehler > $perline)
{
$zaehler = 1;
echo "</tr><tr>";
}
IF ($linkpictures == "on") $rel = "lightbox[Gallery]";
ELSE $rel = "lightbox";
IF ($showpicnames == "on") $name = "$pictures[$x]";
$Picturedata = getimagesize("pictures/".$pictures[$x]);
echo '<td bgcolor="#'.$cellbg.'" width="'.$cellwidth.'" height="'.$cellheight.'" align="center" valign="middle">
<a href="'.$pictureurl.$pictures[$x].'" rel="'.$rel.'" title="'.$name.'"> <img src="'.$thumburl.$pictures[$x].'" border="0"></a></td>';
$zaehler++;



}

?>
</table>
</body>
</html>

Index.html
<html>
<head>
<title>Pictures/</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">
<style type="text/css">
<!--
body {
background-color: #000000;
}
.header {
font-family: "Times New Roman", Times, serif;
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<p class="header">// Pictures</p>
<iframe align="left" width=800 height=300 frameborder="0" marginheight="0" marginwidth="0" name="DisplayFrame" scrolling="auto" src="http://graham.firewings.net/cyanidesite/pics/gallery/pics.php"></iframe>
</body>
</html>

Uiteindelijk wil ik dus meerdere gallery's als include in de div laden, maar zoals nu doet de eerste het niet eens. Iemand die mij kan helpen?

Alvast bedankt,
Graham

maikel
%Europe/Berlin %537 %2007, 13:54
Grote kans dat dit komt omdat deze in een iframe staat.

Waarom, aangezien je al netjes css aan het gebruiken bent, ga je er niet voor om de site helemaal netjes op te bouwen en voor iedere pagina een andere pagina aan te maken. Gegarandeerd dat ook je lightbox werkt dan.

Dus iframes laten vallen en gewoon netjes alles in divs, en voor iedere pagina een losse pagina.

Groet,
Maikel

firewing
%Europe/Berlin %602 %2007, 15:27
Grote kans dat dit komt omdat deze in een iframe staat.

Waarom, aangezien je al netjes css aan het gebruiken bent, ga je er niet voor om de site helemaal netjes op te bouwen en voor iedere pagina een andere pagina aan te maken. Gegarandeerd dat ook je lightbox werkt dan.

Dus iframes laten vallen en gewoon netjes alles in divs, en voor iedere pagina een losse pagina.

Groet,
Maikel
Bedankt voor je reactie Maikel!
Ik heb al echter de hele site in divs staan. De iframe pagina (zoals mijn eerste post beschrijft) is alleen de pagina waarop de lightbox wordt geleverd en dus ook werkt. Deze gebruik ik niet, maar heb ik alleen op mijn server gezet om de code weergeven die daar wel werkt.
Ik wil dus de lightbox werkend krijgen in mijn bestaande div.

Alle suggesties zijn welkom!
Cheers,
Graham

robertjoon
%Europe/Berlin %645 %2007, 16:30
Gaat volgens mij niet werken, ik heb dat ook al een gecheckt.

het probleem ligt hem er namelijk aan dat je pagina uit verschillende onderdelen bestaan.

Met bijvoorbeeld flash kan je overal over de gehele site een MovieClip aanroepen die als een soort van lightbox werkt.

Misschien zit ik er naast, maar dit waren mijn bevindingen toen ik er mee gewerkt heb.

Succes.

Mvg, Robert

maikel
%Europe/Berlin %649 %2007, 16:35
Pas sowieso dit eens aan:
$folder = "./upload/";=> wordt => $folder = $galleryurl . "upload/";

Ik vind dit maar een vreemd gegeven.

Ga je html-code eens na, en kijk eens wat er niet klopt. Je gebruikt body -> table -> div -> en dan wéér een body ?! En op die plek sluit je je js in.

Hier een héél simpel voorbeeld van wat je wil bereiken met je eigen foto's erin:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>

<title>:: Cyanide ::</title>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

</head>

<body>


<a href="http://graham.firewings.net/cyanidesite/pics/gallery/pictures/Cyanide10.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="http://graham.firewings.net/cyanidesite/pics/gallery/pictures/Cyanide11BWcontrast.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="http://graham.firewings.net/cyanidesite/pics/gallery/pictures/Cyanide2BW.jpg" rel="lightbox[roadtrip]">image #3</a>

</body>
</html>


Hier kun je dan je huidige pagina omheen maken. Als je klaar bent en het is gelukt, gooi dan even het resultaat hierneer (uiteraard ook als het niet is gelukt). Zodat iedereen de oplossing kan zien en wij kunnen kijken of je niet nog iets essentieels gemist hebt!

Succes!

Groet,
Maikel

firewing
%Europe/Berlin %689 %2007, 17:32
Pas sowieso dit eens aan:
$folder = "./upload/";=> wordt => $folder = $galleryurl . "upload/";

Ik vind dit maar een vreemd gegeven.

Ga je html-code eens na, en kijk eens wat er niet klopt. Je gebruikt body -> table -> div -> en dan wéér een body ?! En op die plek sluit je je js in.

Hier een héél simpel voorbeeld van wat je wil bereiken met je eigen foto's erin:

Zie vorige post voor voorgestelde html


Hier kun je dan je huidige pagina omheen maken. Als je klaar bent en het is gelukt, gooi dan even het resultaat hierneer (uiteraard ook als het niet is gelukt). Zodat iedereen de oplossing kan zien en wij kunnen kijken of je niet nog iets essentieels gemist hebt!

Succes!

Groet,
Maikel
Bedankt voor jullie hulp!

Ik snap dat de code een beetje een rotzooitje is. Dit komt omdat het een mengeling is van een script die al bestond al sample en van zelf geschreven dingen.
In elk geval heb ik het $galleryurl geval veranderd.. raar dat dat er inderdaad zo in zat, maar hij werkte wel dus dat was het probleem in elk geval niet.

Ik heb gedaan wat je zei en een nieuw php bestandje gemaakt met de voorgestelde code. Hij staat hier: http://graham.firewings.net/cyanidesite/pics/test.php

Zoals je ziet doet dit het ook niet. ik neem aan dat je die rel commands van een pagina heb van lightbox zelf? Want dit is een geeditte versie. Deze versie maakt namelijk helemaal zelf thumbnails & tables om de fotos in te weergeven en maakt dus ook zelf die regel met rel=lightbox erin via het php bestand. Dus daar kan het niet aan liggen.

Ik snap niet helemaal wat je bedoelt met dat "body > table > div" stukje. Ik denk dat je dit stukje bedoelt, want ik denk zelf ook dat daar de fout in zit?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://graham.firewings.net/cyanidesite/pics/js/prototype.js"></script>
<script type="text/javascript" src="http://graham.firewings.net/cyanidesite/pics/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://graham.firewings.net/cyanidesite/pics/js/lightbox.js"></script>
<link rel="stylesheet" href="http://graham.firewings.net/cyanidesite/pics/css/lightbox.css" type="text/css" media="screen">
</head>

<body BGCOLOR=#<?PHP echo $bgcolor; ?> LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onload="parent.initLightbox();">

<table border="0" align="center" cellpadding="0" cellspacing="2">


ohja en @robertjoon, ik snap wat je bedoelt, dit dacht ik eerst ook, maar het is allemaal html en css, iframe of div. Kan het dan nog zijn dat hij niet werkt denk je?

Ik hoop dat we er uit komen,
Graham

firewing
%Europe/Berlin %819 %2007, 20:39
*bump*

Niemand die weet wat er aan de hand is?