Hello,
I want to implement a javascript zoom feature onto a php page which is a slide show.
The php page displays slides as PNG images. The user can download all of the sides as a powerpoint file, underneath that there is 1 large image, which is the first slide and then underneath that there is a drop down list containing all of the other slides and a previous and next button. The code for the slides is:
<!-- SLIDES CODE -->
Code: Select all
<?php
if ($isSlides == 'y'){
echo("<span style=\"font-size:11px;\"><a href=\"$ppt_loc\">Download slides</a></span>");
echo("<div>");
for ( $x = 1; $x <= $num_of_slides; $x++) {
echo("<div class=\"virtualpage5\"><img class=\"largeslides\" src=\"slides/Slide$x.png\" /></div>");
echo("</div>");
}
echo("<div id=\"galleryselect\" class=\"paginationstyle\"> <a href=\"#\" rel=\"previous\">Prev</a><select style=\"width: 200px; font-size:10;\"></select><a href=\"#\" rel=\"next\">Next</a></div>");
} else {
echo("<div class=\"virtualpage5\"><img class=\"slides\" src=\"http://www.healthcareworkforce.nhs.uk/e ... slides.gif\" /></div>");
}
?>
<script type="text/javascript">
var gallery=new virtualpaginate("virtualpage5", 1)
gallery.buildpagination("galleryselect", [<?php echo($slide_title) ; ?>])
</script>
<!-- END SLIDES CODE -->
The javascript zoom feature is:
<a href="javascript:initMagnifier()" class="magnify_this">
<img src="http://www.isdntek.com/tagbot/misc/bambi.jpg"
width="400" height="300" border="0"></a>
<script language="javascript" defer>initMagnifier()</script>
I have added it into my code in the following way:
<!-- SLIDES CODE -->
<?php
if ($isSlides == 'y'){
echo("<span style=\"font-size:11px;\"><a href=\"$ppt_loc\">Download slides</a></span>");
echo("<div>");
for ( $x = 1; $x <= $num_of_slides; $x++) {
echo("<div class=\"virtualpage5\"><a href=\"javascript:initMagnifier()\" class=\"magnify_this\"><img class=\"largeslides\" src=\"slides/Slide$x.png\" width=\"600\" height=\"849\" border=\"0\" /></div>");
echo("</div>");
}
echo("<div id=\"galleryselect\" class=\"paginationstyle\"> <a href=\"#\" rel=\"previous\">Prev</a><select style=\"width: 200px; font-size:10;\"></select><a href=\"#\" rel=\"next\">Next</a></div>");
} else {
echo("<div class=\"virtualpage5\"><img class=\"slides\" src=\"http://www.healthcareworkforce.nhs.uk/e ... slides.gif\" /></div>");
}
?>
<script type="text/javascript">
var gallery=new virtualpaginate("virtualpage5", 1)
gallery.buildpagination("galleryselect", [<?php echo($slide_title) ; ?>])
</script>
<!--
The code below is the automatic script activator,
and your images must carry dimensions for it to work.
Omit this activator if you don't have image dimensions
or would like the user to activate the magnifier.
The activator must come after the magnifier code
and after all of your photos.
-->
<script language="javascript" defer>initMagnifier()</script>
<!-- END SLIDES CODE -->
This magnifys my first slide, however when I select the next slide the page displays no slides at all!!!!!
Is there a way a round this? Or is there some php that I can use instead that would magnify the slides?
I got the javascript code from the site http://www.isdntek.com/tagbot/zipzoom.htm
I have been looking at this for ages now and I cannot figure it out, is driving me mad. I would be very greatful for your help.
Thank you.