2 javascripts linken binnen 1 pagina?

Status
Niet open voor verdere reacties.

Merijnbosma

Gebruiker
Lid geworden
7 jun 2011
Berichten
189
Hallo,

Ik ben bezig om een diavoorstelling op mijn website te zetten. Nu had ik het zo bedacht om ze te splitsen in 2 dagen en een link voor diavoorstelling en een link voor een index.
kijk hier voor de bedoeling

Nu heb ik via triptracker een stuk code wat een script vanaf hun site laad als ik het goed heb. Maar ik wil dus graag 2 dia voorstellingen op 1 pagina kunnen laden.

Kan iemand mij hiermee helpen? De code staat hier onder

HTML:
<?php

// enter the path to the folder containing your slideshow images below

$photodir = "photos";

// enable/disable custom strings (type "1" to enable the setting, leave blank to disable it)

$shuffle_photos       = ""; // randomly loads the images in array on each page load
$time_interval        = "4000"; // time between slides, in miliseconds
$disable_panning      = "1"; // disables panning of oversized photos during playback
$disable_fading       = ""; // disables fading images in/out
$enable_autoplay      = "1"; // viewer starts playing the slideshow automatically when slideshow link/button is clicked
$enable_loop          = ""; // images loop start to finish indefinitely
$disable_email_link   = "1"; // hide email link in toolbar
$disable_photo_link   = "1"; // hide photo link in toolbar
$disable_toolbar      = ""; // hide the toolbar completely
$text_font_size       = "14"; // input caption text font size, in pixels
$border_width         = "20"; // sets the photo's border width, in pixels
$disable_shade        = ""; // disables the shaded background
$shade_color          = "#ffffff"; // sets the shade color
$shade_opacity        = "1.0"; // sets the opacity of the shade. 0.0 is fully transparent, 1.0 is fully opaque
$background_color     = "#ffffff"; // input player background color, in hex fomat (eg. #123456)

// enter any other custom javascript strings below (see http://slideshow.triptracker.net/howto.html for details).
// this section makes it easy to plug future new functionality into the existing script...

$custom_options = "\n
        viewer.setOnClickEvent(viewer.startSlideShow);
	viewer.enableToolbarAnimator();
";

// finished. leave the rest of this script as-is

?>

<html>

    <head>

        <title>Open dag Wifocarr 2011</title>

        <script type="text/javascript"
	        src="http://slideshow.triptracker.net/slide.js"></script>

        <script type="text/javascript">
        <!--

        var viewer = new PhotoViewer();

        <?php

        $photos = array();

        $dh = opendir($photodir);

        while ($filename = readdir($dh)) {

            if ((($filename != ".") && ($filename != "..")) &&
            ((preg_match("/jpg/i",$filename)) or (preg_match("/gif/i",$filename)))){

                $photos[] = $filename;

            }

        }

        closedir($dh);

        if ($shuffle_photos) {

            shuffle($photos);

        }

        foreach ($photos as $photo) {

            echo "\n        viewer.add('".$photodir."/".$photo."'";

            $enabled_extensions = get_loaded_extensions();

                if (in_array(exif, $enabled_extensions)) {

                    $exif = exif_read_data ($photodir."/".$photo);

                    while (list($key,$val)=each($exif)){

                        if ($key == "DateTimeOriginal"){

                            $TIME = explode(" ",$val);

                            $DATE = explode(":", $TIME[0]);


                        }

                    }

                }

            echo ");";

        }

        if ($time_interval) { echo "\n        viewer.setSlideDuration($time_interval);"; }

        if ($disable_panning) { echo "\n        viewer.disablePanning();"; }

        if ($disable_fading) { echo "\n        viewer.disableFading();"; }

        if ($enable_autoplay) { echo "\n        viewer.enableAutoPlay();"; }

        if ($enable_loop) { echo "\n        viewer.enableLoop();"; }

        if ($disable_email_link) { echo "\n        viewer.disableEmailLink();"; }

        if ($disable_photo_link) { echo "\n        viewer.disablePhotoLink();"; }

        if ($disable_toolbar) { echo "\n        viewer.disableToolbar();"; }

        if ($text_font_size) { echo "\n        viewer.setFontSize($text_font_size);"; }

        if ($background_color) { echo "\n        viewer.setBackgroundColor('$background_color');"; }

        if ($border_width) { echo "\n        viewer.setBorderWidth($border_width);"; }

        if ($disable_shade) { echo "\n        viewer.disableShade();"; }

        if ($shade_color) { echo "\n        viewer.setShadeColor('$shade_color');"; }

        if ($shade_opacity) { echo "\n        viewer.setShadeOpacity($shade_opacity);"; }

        echo "$custom_options";

        ?>

        //-->
        </script>

    </head>

    <body>
	<br/><br/>
	<hr width="100%" size="10" color="#393842"></hr> 
	<center><img src="http://www.wifocarr.nl/downloads/Open%20dag%202011/OpendagWifocarr2011/wifocarr%20(1).png" height="150"> </center> 
	<hr width="100%" size="10" color="#393842"></hr>
		
	<center>
		<table>
		<tr>
			[COLOR="purple"]<td class="thumbcell"><a href="javascript:void(viewer.show(0))"><img src="http://www.wifocarr.nl/downloads/Open%20dag%202011/diavoorstelling%20open%20dag.png" vspace="25" hspace="50" height="200"></a></td>
			<td class="thumbcell"><a href="javascript:void(viewer.show(0))"><img src="http://www.wifocarr.nl/downloads/Open%20dag%202011/diavoorstelling%20najaarsrit%20ota.png" vspace="25" hspace="50" height="200"></a></td>[/COLOR]
		</tr>
		<tr>
			<td class="thumbcell"><a href="http://www.wifocarr.nl/downloads/Open%20dag%202011/OpendagWifocarr2011/index.html"><img src="http://www.wifocarr.nl/downloads/Open%20dag%202011/foto%20index%20open%20dag.png" vspace="25" hspace="50" height="200"></a></td>
			<td class="thumbcell"><a href="http://www.wifocarr.nl/downloads/Open%20dag%202011/OpendagWifocarr2011/index.html"><img src="http://www.wifocarr.nl/downloads/Open%20dag%202011/foto%20index%20najaarsrit%20ota.png" vspace="25" hspace="50" height="200"></a></td>
		</tr>
		</table>
	</center>
    </body>

</html>

In de paarse tekst staan de 2 links die het zouden moeten gaan doen als het kan/werkt.

Alvast bedankt.
 
Laatst bewerkt:
Ik zag dat de link naar de site niet goed werkte. Bij deze dus aangepast.

Ik hoop dat iemand me kan helpen. THNX!!
 
Ik heb je post in het PHP-forum verwijderd, en deze hier van HTML naar PHP verplaatst. Hou het volgende keer graag van begin af aan al bij één topic alsjeblieft :)
 
Laatst bewerkt:
Ik heb bij triptracker op de site dit stukje code gevonden wat ik in zou moeten voegen om 2 scripts op 1 pagina te krijgen.

[JS]var viewer1 = new PhotoViewer();
viewer1.add('photo1.jpg');

var viewer2 = new PhotoViewer();
viewer2.add('photo2.jpg');
[...]
<a href="javascript:void(viewer1.show(0))">Slideshow 1</a>
<a href="javascript:void(viewer2.show(0))">Slideshow 2</a>[/JS]

Ik snap er niet veel van en vraag me af hoe ik dan zorg dat de elk script de goede map foto's af speelt.

iemand?
 
Ik heb inmiddels de slideshows in één pagina gekregen maar nu ben ik de instellingen kwijt. En die krijg ik er zo niet weer op... Kan iemand me daar dan mee helpen?

Dit is het script met beide slideshows in één pagina maar dus zonder de instellingen
[JS]<?php

// slideshow options properties

$shuffle_photos = "1"; // randomly loads the images in array on each page load
$time_interval = "4000"; // time between slides, in miliseconds
$disable_panning = "1"; // disables panning of oversized photos during playback
$disable_fading = ""; // disables fading images in/out
$enable_autoplay = ""; // viewer starts playing the slideshow automatically when slideshow link/button is clicked
$enable_loop = ""; // images loop start to finish indefinitely
$disable_email_link = ""; // hide email link in toolbar
$disable_photo_link = ""; // hide photo link in toolbar
$disable_toolbar = ""; // hide the toolbar completely
$text_font_size = "14"; // input caption text font size, in pixels
$border_width = "20"; // sets the photo's border width, in pixels
$disable_shade = ""; // disables the shaded background
$shade_color = "#000000"; // sets the shade color
$shade_opacity = "0.7"; // sets the opacity of the shade. 0.0 is fully transparent, 1.0 is fully opaque
$background_color = "#000000"; // input player background color, in hex fomat (eg. #123456)

// enter the path to the folder containing your slideshow images below

$firstPhotoDir = "gallery/firstGallery";
$secondPhotoDir = "gallery/secondGallery";

$firstPhotosArray = array();
$secondPhotosArray = array();

function ScanFolder($photoDir, $photosArray)
{
$dh = opendir($photoDir);

while ($filename = readdir($dh)) {

if ((($filename != ".") && ($filename != "..")) &&
((preg_match("/jpg/i",$filename)) or (preg_match("/gif/i",$filename)) or (preg_match("/png/i",$filename)))){

$photosArray[] = $filename;

}

}

closedir($dh);

return $photosArray;
}

?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://slideshow.triptracker.net/slide.js"></script>

<script type="text/javascript">

//Create viewer instances
var firstViewer = new PhotoViewer();
var secondViewer = new PhotoViewer();


<?php

//Scan first photos dir
$photos = ScanFolder($firstPhotoDir, $firstPhotosArray);
//Add photos to the viewer
foreach ($photos as $photo) {
echo "\n firstViewer.add('".$firstPhotoDir."/".$photo."')";
}



//Scan second photos dir
$photos = ScanFolder($secondPhotoDir, $secondPhotosArray);
//Add photos to the viewer
foreach ($photos as $photo) {
echo "\n secondViewer.add('".$secondPhotoDir."/".$photo."')";
}



//Set custom options to the viewers

if ($time_interval) {
echo "\n firstViewer.setSlideDuration(4);";
echo "\n secondViewer.setSlideDuration(4);";
}

if ($disable_panning) {
echo "\n firstViewer.disablePanning();";
echo "\n secondViewer.disablePanning();";
}

if ($disable_fading) {
echo "\n firstViewer.disableFading();"; }
echo "\n secondViewer.disableFading();"; }

if ($enable_autoplay) {
echo "\n firstViewer.enableAutoPlay(y);";
echo "\n secondViewer.enableAutoPlay(y);";
}

if ($enable_loop) {
echo "\n firstViewer.enableLoop();";
echo "\n secondViewer.enableLoop();";
}

if ($disable_email_link) {
echo "\n firstViewer.disableEmailLink();";
echo "\n secondViewer.disableEmailLink();";
}

if ($disable_photo_link) {
echo "\n firstViewer.disablePhotoLink();";
echo "\n secondViewer.disablePhotoLink();";
}

if ($disable_toolbar) {
echo "\n firstViewer.disableToolbar();";
echo "\n secondViewer.disableToolbar();";
}

if ($text_font_size) {
echo "\n firstViewer.setFontSize($text_font_size);";
echo "\n secondViewer.setFontSize($text_font_size);";
}

if ($background_color) {
echo "\n firstViewer.setBackgroundColor('$background_color');";
echo "\n secondViewer.setBackgroundColor('$background_color');";
}

if ($border_width) {
echo "\n firstViewer.setBorderWidth($border_width);";
echo "\n secondViewer.setBorderWidth($border_width);";
}

if ($disable_shade) {
echo "\n firstViewer.disableShade();";
echo "\n secondViewer.disableShade();";
}

if ($shade_color) {
echo "\n firstViewer.setShadeColor('$shade_color');";
echo "\n secondViewer.setShadeColor('$shade_color');";
}

if ($shade_opacity) {
echo "\n firstViewer.setShadeOpacity($shade_opacity);";
echo "\n secondViewer.setShadeOpacity($shade_opacity);";
}

?>

</script>
</head>

<body background="http://www.wifocarr.nl/downloads/Open%20dag%202011/Opera-Background-Wood.jpg" width="100%">
<table height="10" width="100%" bgcolor="#ffffff">
<tr height="7"></tr>
<td width="100%" bgcolor="#393842" height="10" ></td>
</table>

<table width="100%" border="0" bgcolor="#ffffff">
<tr>
<td><center><a href="http://www.wifocarrshop.nl"><img src="http://www.wifocarr.nl/downloads/Open%20dag%202011/wifocarr-logo365x150.png" vspace="3" height="150"></center></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#393842" height="10" ></td>
</tr>
<tr height="7"></tr>
</table>

<br/><br/><br/><br/>

<center>

<table border="3" bgcolor="cecfce">
<tr>
<td class="thumbcell"><a href="javascript:void(secondViewer.show(0))"><img src="http://www.wifocarr.nl/downloads/Open%20dag%202011/diavoorstelling%20open%20dag.png" vspace="25" hspace="50" height="200"></a></td>
<td class="thumbcell"><a href="javascript:void(firstViewer.show(0))"><img src="http://www.wifocarr.nl/downloads/Open%20dag%202011/diavoorstelling%20najaarsrit%20ota.png" vspace="25" hspace="50" height="200"></a></td>
</tr>
<tr>
<td class="thumbcell"><a href="http://www.wifocarr.nl/downloads/Open%20dag%202011/OpendagWifocarr2011/index.html"><img src="http://www.wifocarr.nl/downloads/Open%20dag%202011/foto%20index%20open%20dag.png" vspace="25" hspace="50" height="200"></a></td>
<td class="thumbcell"><a href="http://www.wifocarr.nl/downloads/Open%20dag%202011/NajaarsritOTA2011/index.html"><img src="http://www.wifocarr.nl/downloads/Open%20dag%202011/foto%20index%20najaarsrit%20ota.png" vspace="25" hspace="50" height="200"></a></td>
</tr>
</table>

</center>
</body>

</html> [/JS]

Ik wil graag de autoplay aanzetten, de mail en fotoknop weg hebben en autohide van de toolbar.

Ik hoop dat iemand me hiermee kan helpen

Dit is het script zoals die was voor beide slideshows met de instellingen zoals ik ze graag wil

[JS]<?php

// enter the path to the folder containing your slideshow images below

$photodir = "photos";

// enable/disable custom strings (type "1" to enable the setting, leave blank to disable it)

$shuffle_photos = ""; // randomly loads the images in array on each page load
$time_interval = "4000"; // time between slides, in miliseconds
$disable_panning = "1"; // disables panning of oversized photos during playback
$disable_fading = ""; // disables fading images in/out
$enable_autoplay = "1"; // viewer starts playing the slideshow automatically when slideshow link/button is clicked
$enable_loop = ""; // images loop start to finish indefinitely
$disable_email_link = "1"; // hide email link in toolbar
$disable_photo_link = "1"; // hide photo link in toolbar
$disable_toolbar = ""; // hide the toolbar completely
$text_font_size = "14"; // input caption text font size, in pixels
$border_width = "20"; // sets the photo's border width, in pixels
$disable_shade = ""; // disables the shaded background
$shade_color = "#ffffff"; // sets the shade color
$shade_opacity = "1.0"; // sets the opacity of the shade. 0.0 is fully transparent, 1.0 is fully opaque
$background_color = "#ffffff"; // input player background color, in hex fomat (eg. #123456)

// enter any other custom javascript strings below (see http://slideshow.triptracker.net/howto.html for details).
// this section makes it easy to plug future new functionality into the existing script...

$custom_options = "\n
viewer.setOnClickEvent(viewer.startSlideShow);
viewer.enableToolbarAnimator();
";

// finished. leave the rest of this script as-is

?>

<html>

<head>

<title>Open dag Wifocarr 2011</title>

<style type="text/css">
a img {border: 0;}
</style>

<script type="text/javascript"
src="http://slideshow.triptracker.net/slide.js"></script>

<script type="text/javascript">
<!--

var viewer = new PhotoViewer();

<?php

$photos = array();

$dh = opendir($photodir);

while ($filename = readdir($dh)) {

if ((($filename != ".") && ($filename != "..")) &&
((preg_match("/jpg/i",$filename)) or (preg_match("/gif/i",$filename)))){

$photos[] = $filename;

}

}

closedir($dh);

if ($shuffle_photos) {

shuffle($photos);

}

foreach ($photos as $photo) {

echo "\n viewer.add('".$photodir."/".$photo."'";

$enabled_extensions = get_loaded_extensions();

if (in_array(exif, $enabled_extensions)) {

$exif = exif_read_data ($photodir."/".$photo);

while (list($key,$val)=each($exif)){

if ($key == "DateTimeOriginal"){

$TIME = explode(" ",$val);

$DATE = explode(":", $TIME[0]);


}

}

}

echo ");";

}

if ($time_interval) { echo "\n viewer.setSlideDuration($time_interval);"; }

if ($disable_panning) { echo "\n viewer.disablePanning();"; }

if ($disable_fading) { echo "\n viewer.disableFading();"; }

if ($enable_autoplay) { echo "\n viewer.enableAutoPlay();"; }

if ($enable_loop) { echo "\n viewer.enableLoop();"; }

if ($disable_email_link) { echo "\n viewer.disableEmailLink();"; }

if ($disable_photo_link) { echo "\n viewer.disablePhotoLink();"; }

if ($disable_toolbar) { echo "\n viewer.disableToolbar();"; }

if ($text_font_size) { echo "\n viewer.setFontSize($text_font_size);"; }

if ($background_color) { echo "\n viewer.setBackgroundColor('$background_color');"; }

if ($border_width) { echo "\n viewer.setBorderWidth($border_width);"; }

if ($disable_shade) { echo "\n viewer.disableShade();"; }

if ($shade_color) { echo "\n viewer.setShadeColor('$shade_color');"; }

if ($shade_opacity) { echo "\n viewer.setShadeOpacity($shade_opacity);"; }

echo "$custom_options";

?>

//-->
</script>

</head>

<body background="http://www.wifocarr.nl/downloads/Open%20dag%202011/Opera-Background-Wood.jpg" width="100%">
<table height="10" width="100%" bgcolor="#ffffff">
<tr height="7"></tr>
<td width="100%" bgcolor="#393842" height="10" ></td>
</table>

<table width="100%" border="0" bgcolor="#ffffff">
<tr>
<td><center><a href="http://www.wifocarrshop.nl"><img src="http://www.wifocarr.nl/downloads/Open%20dag%202011/wifocarr-logo365x150.png" vspace="3" height="150"></center></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#393842" height="10" ></td>
</tr>
<tr height="7"></tr>
</table>

<br/><br/><br/><br/><br/><br/><br/><br/>

<center>

<a href="javascript:void(viewer.show(0))"><img src="http://www.wifocarr.nl/downloads/Open%20dag%202011/play%20button.png" height ="100"></a>

<br/><br/><br/><br/><br/><br/><br/><br/>

<a href="http://www.wifocarr.nl/downloads/Open%20dag%202011/Open%20dag%20Wifocarr%202011.php"><img src="http://www.wifocarr.nl/downloads/Open%20dag%202011/menu%20button.png" height="100"></a>

</center>
</body>

</html>
[/JS]
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan