Images in combi PHP en visual lightbox probleem
Het volgende is het probleem:
Ik probeer met een PHP script en visual lightbox het mogelijk te maken dat een image (die niet compleet random is maar opvolgend) de script functies van lightbox overneemt.
Normaal gesproken gebruikt lightbox daarvoor een html pagina met gebruik van zijn eigen java en css. Deze wil ik dan ook niet aanpassen, maar slechts het aanroepen van de bepaalde images.
Op dit moment worden de thumbnail images alleen nog weergegegeven op de pagina, maar wanneer ik daarop klik krijg ik een lege pagina met daarop de thumbnail en niet de lightbox features.
Verder roep ik met het script tot nu toe alleen de thumbnail aan, maar natuurlijk moet ook de image in het juiste formaat worden weergegeven. Ook hier zou ik graag een oplossing voor zien.
Zijn er mensen die zo'n combinatie al eens hebben geprobeerd te maken of die een betere (PHP?) oplossing hebben.
Hieronder delen van het script tot nu :
Het organiseren van de images :
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<?php
Function GetImages(&$Image1, &$Image2, &$Image3, &$Image4, &$Image5){
$imglist='';
//$img_folder is the variable that holds the path to the banner images. Mine is images/tutorials/
// see that you don't forget about the "/" at the end
$img_folder = "includes/data/thumbnails1/";
mt_srand((double)microtime()*1000);
//use the directory class
$imgs = dir($img_folder);
//read all files from the directory, checks if are images and ads them to a list (see below how to display flash banners)
while ($file = $imgs->read()) {
if (mb_ereg("gif", $file) || mb_ereg("jpg", $file) || mb_ereg("png", $file))
$imglist .= "$file ";
} closedir($imgs->handle);
//put all images into an array
$imglist = explode(" ", $imglist);
$no = sizeof($imglist)-2;
//generate a random number between 0 and the number of images
$random = mt_rand(0, $no);
$random2 = $random + 1;
if ($random2 > $no ) {
$random2 = 0;
}
$random3 = $random2 +1;
if ($random3 > $no) {
$random3 = 0;
}
$random4 = $random3 +1;
if ($random4 > $no) {
$random4 = 0;
}
$random5 = $random4 +1;
if ($random5 > $no) {
$random5 = 0;
}
$random6 = $random5 +1;
if ($random6 > $no) {
$random6 = 0;
}
$image = $imglist[$random];
$Image1 = $img_folder.$image;
$image = $imglist[$random2];
$Image2 = $img_folder.$image;
$image = $imglist[$random3];
$Image3 = $img_folder.$image;
$image = $imglist[$random4];
$Image4 = $img_folder.$image;
$image = $imglist[$random5];
$Image5 = $img_folder.$image;
}
?>
Function GetImages(&$Image1, &$Image2, &$Image3, &$Image4, &$Image5){
$imglist='';
//$img_folder is the variable that holds the path to the banner images. Mine is images/tutorials/
// see that you don't forget about the "/" at the end
$img_folder = "includes/data/thumbnails1/";
mt_srand((double)microtime()*1000);
//use the directory class
$imgs = dir($img_folder);
//read all files from the directory, checks if are images and ads them to a list (see below how to display flash banners)
while ($file = $imgs->read()) {
if (mb_ereg("gif", $file) || mb_ereg("jpg", $file) || mb_ereg("png", $file))
$imglist .= "$file ";
} closedir($imgs->handle);
//put all images into an array
$imglist = explode(" ", $imglist);
$no = sizeof($imglist)-2;
//generate a random number between 0 and the number of images
$random = mt_rand(0, $no);
$random2 = $random + 1;
if ($random2 > $no ) {
$random2 = 0;
}
$random3 = $random2 +1;
if ($random3 > $no) {
$random3 = 0;
}
$random4 = $random3 +1;
if ($random4 > $no) {
$random4 = 0;
}
$random5 = $random4 +1;
if ($random5 > $no) {
$random5 = 0;
}
$random6 = $random5 +1;
if ($random6 > $no) {
$random6 = 0;
}
$image = $imglist[$random];
$Image1 = $img_folder.$image;
$image = $imglist[$random2];
$Image2 = $img_folder.$image;
$image = $imglist[$random3];
$Image3 = $img_folder.$image;
$image = $imglist[$random4];
$Image4 = $img_folder.$image;
$image = $imglist[$random5];
$Image5 = $img_folder.$image;
}
?>
Het aanvragen van de images :
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php GetImages($IMG,$IMG2,$IMG3,$IMG4,$IMG5);
echo "<div id=\"vlightbox1\">";
echo "<table width=\"200\" border=\"0\" padding=\"5\" align=\"right\" >";
echo "<tr>";
echo "<td><a class=\"vlightbox1\" href=\"$IMG\" title=\"0601-0106_JoJe\"><img src= $IMG border=0 align=\"left\"></a></td>";
echo "</tr>";
echo "<tr>";
echo "<td><a class=\"vlightbox1\" href=\"$IMG2\" title=\"0601-0106_JoJe\"><img src= $IMG2 border=0 align=\"left\"></a></td>";
echo "</tr>";
echo "<tr>";
echo "<td><a class=\"vlightbox1\" href=\"$IMG3\" title=\"0601-0106_JoJe\"><img src= $IMG3 border=0 align=\"left\"></a></td>";
echo "</tr>";
echo "<tr>";
echo "<td><a class=\"vlightbox1\" href=\"$IMG4\" title=\"0601-0106_JoJe\"><img src= $IMG4 border=0 align=\"left\"></a></td>";
echo "</tr>";
echo "<tr>";
echo "<td><a class=\"vlightbox1\" href=\"$IMG5\" title=\"0601-0106_JoJe\"><img src= $IMG5 border=0 align=\"left\"></a></td>";
echo "</tr>";
echo "<tr>";
echo "<td><a class=\"vlb\" style=\"display:none\" href=\"http://visuallightbox.com\">Free Slideshow Script by VisualLightBox.com v4.8</a></td>";
echo "</table>";
echo "</div>";
?>
echo "<div id=\"vlightbox1\">";
echo "<table width=\"200\" border=\"0\" padding=\"5\" align=\"right\" >";
echo "<tr>";
echo "<td><a class=\"vlightbox1\" href=\"$IMG\" title=\"0601-0106_JoJe\"><img src= $IMG border=0 align=\"left\"></a></td>";
echo "</tr>";
echo "<tr>";
echo "<td><a class=\"vlightbox1\" href=\"$IMG2\" title=\"0601-0106_JoJe\"><img src= $IMG2 border=0 align=\"left\"></a></td>";
echo "</tr>";
echo "<tr>";
echo "<td><a class=\"vlightbox1\" href=\"$IMG3\" title=\"0601-0106_JoJe\"><img src= $IMG3 border=0 align=\"left\"></a></td>";
echo "</tr>";
echo "<tr>";
echo "<td><a class=\"vlightbox1\" href=\"$IMG4\" title=\"0601-0106_JoJe\"><img src= $IMG4 border=0 align=\"left\"></a></td>";
echo "</tr>";
echo "<tr>";
echo "<td><a class=\"vlightbox1\" href=\"$IMG5\" title=\"0601-0106_JoJe\"><img src= $IMG5 border=0 align=\"left\"></a></td>";
echo "</tr>";
echo "<tr>";
echo "<td><a class=\"vlb\" style=\"display:none\" href=\"http://visuallightbox.com\">Free Slideshow Script by VisualLightBox.com v4.8</a></td>";
echo "</table>";
echo "</div>";
?>
De HTML voor lightbox ziet er normaal zo uit:
<html>
<div id="vlightbox1">
<a class="vlightbox1" href="data/images1/0601-0106_joje.jpg" title="0601-0106_JoJe"><img src="data/thumbnails1/0601-0106_joje.jpg" alt="0601-0106_JoJe"/></a>
<a class="vlightbox1" href="data/images1/8138_icon_sb.jpg" title="8138_ICON_SB"><img src="data/thumbnails1/8138_icon_sb.jpg" alt="8138_ICON_SB"/></a>
<a class="vlightbox1" href="data/images1/balance_1.jpg" title="Balance_1"><img src="data/thumbnails1/balance_1.jpg" alt="Balance_1"/></a>
<a class="vlightbox1" href="data/images1/bocina.jpg" title="Bocina"><img src="data/thumbnails1/bocina.jpg" alt="Bocina"/></a>
<a class="vlightbox1" href="data/images1/carve_presse.jpg" title="Carve_Presse"><img src="data/thumbnails1/carve_presse.jpg" alt="Carve_Presse"/></a>
<a class="vlightbox1" href="data/images1/curve_3tlg_sw.jpg" title="Curve_3tlg_sw"><img src="data/thumbnails1/curve_3tlg_sw.jpg" alt="Curve_3tlg_sw"/></a>
<a class="vlightbox1" href="data/images1/evo_1_mli_presse.jpg" title="Evo_1_Mli_Presse"><img src="data/thumbnails1/evo_1_mli_presse.jpg" alt="Evo_1_Mli_Presse"/></a>
<a class="vlightbox1" href="data/images1/flower_pr_2.jpg" title="Flower_PR_2"><img src="data/thumbnails1/flower_pr_2.jpg" alt="Flower_PR_2"/></a>
<a class="vlightbox1" href="data/images1/helixmilieu.jpg" title="HelixMilieu"><img src="data/thumbnails1/helixmilieu.jpg" alt="HelixMilieu"/></a>
<a class="vlightbox1" href="data/images1/hutschenreuther.jpg" title="hutschenreuther"><img src="data/thumbnails1/hutschenreuther.jpg" alt="hutschenreuther"/></a>
<a class="vlightbox1" href="data/images1/kleiner_prinz_pr_1.jpg" title="Kleiner_Prinz_PR_1"><img src="data/thumbnails1/kleiner_prinz_pr_1.jpg" alt="Kleiner_Prinz_PR_1"/></a>
<a class="vlightbox1" href="data/images1/loop_pr2.jpg" title="Loop_PR2"><img src="data/thumbnails1/loop_pr2.jpg" alt="Loop_PR2"/></a>
<a class="vlightbox1" href="data/images1/menagen_1neu.jpg" title="Menagen_1neu"><img src="data/thumbnails1/menagen_1neu.jpg" alt="Menagen_1neu"/></a>
<a class="vlightbox1" href="data/images1/peel_pr_2.jpg" title="Peel_PR_2"><img src="data/thumbnails1/peel_pr_2.jpg" alt="Peel_PR_2"/></a>
<a class="vlightbox1" href="data/images1/pure.jpg" title="Pure"><img src="data/thumbnails1/pure.jpg" alt="Pure"/></a>
<a class="vlightbox1" href="data/images1/quadleuchter_pr.jpg" title="Quadleuchter_PR"><img src="data/thumbnails1/quadleuchter_pr.jpg" alt="Quadleuchter_PR"/></a>
<a class="vlightbox1" href="data/images1/scala.jpg" title="Scala"><img src="data/thumbnails1/scala.jpg" alt="Scala"/></a>
<a class="vlightbox1" href="data/images1/silk_pr_2a.jpg" title="Silk_PR_2a"><img src="data/thumbnails1/silk_pr_2a.jpg" alt="Silk_PR_2a"/></a>
<a class="vlightbox1" href="data/images1/sino_presse.jpg" title="Sino_Presse"><img src="data/thumbnails1/sino_presse.jpg" alt="Sino_Presse"/></a>
<a class="vlightbox1" href="data/images1/tee_set.jpg" title="Tee_Set"><img src="data/thumbnails1/tee_set.jpg" alt="Tee_Set"/></a>
<a class="vlightbox1" href="data/images1/twistfire_outdoor.jpg" title="Twistfire_Outdoor"><img src="data/thumbnails1/twistfire_outdoor.jpg" alt="Twistfire_Outdoor"/></a>
<a class="vlightbox1" href="data/images1/vane_3.jpg" title="Vane_3"><img src="data/thumbnails1/vane_3.jpg" alt="Vane_3"/></a>
<a class="vlightbox1" href="data/images1/velvet_vusw.jpg" title="Velvet_vusw"><img src="data/thumbnails1/velvet_vusw.jpg" alt="Velvet_vusw"/></a>
<a class="vlightbox1" href="data/images1/weinthema.jpg" title="Weinthema"><img src="data/thumbnails1/weinthema.jpg" alt="Weinthema"/></a>
<a class="vlb" style="display:none" href="http://visuallightbox.com">Free Slideshow Script by VisualLightBox.com v4.8</a>
</div>
</html>
Met daarvoor in de HEAD sectie :
<html>
<link rel="stylesheet" href="engine/css/vlightbox1.css" type="text/css" />
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
<script src="engine/js/vlbdata.js" type="text/javascript"></script>
</html>
Ik hoop dat jullie me verder kunnen helpen met het uitpluizen van een dergelijk script.
Gewijzigd op 22/06/2011 00:01:19 door Marc van Gemeren
Er zijn nog geen reacties op dit bericht.