»
EnglishFrenchVietnamese

Print - Dynamic PHP Picture Viewer - JavaScriptBank.com

Full version: jsB@nk » Image » Image viewer » Dynamic PHP Picture Viewer
URL: http://www.javascriptbank.com/dynamic-php-picture-viewer-index.html

Dynamic PHP Picture Viewer © JavaScriptBank.comThis script combines PHP with JavaScript to let you easily display all pictures within a directory without having to input their file names into the script! An external PHP file takes care of all the manual labour, by retrieving the list of images inside the directory and passing it onto the viewer script. Even the select menu used to choose the image to display is automatically generated. And last but not least, in IE and Firefox, a fade effect is applied each time an image is shown. Spiffy!To use this script, your server simply has to support PHP, as this script references an external PHP file to get the images of the containing directory. The page that will show the pictures itself does NOT have to be a PHP page.

Full version: jsB@nk » Image » Image viewer » Dynamic PHP Picture Viewer
URL: http://www.javascriptbank.com/dynamic-php-picture-viewer-index.html



CSS
<style type="text/css">#picturearea{filter:alpha(opacity=100);-moz-opacity: 0;}</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script src="getpics.php" type="text/javascript"></script><script type="text/javascript"><!-- Dynamic PHP Picture Viewer (v1.0)- By JavaScriptKit.com (http://www.javascriptkit.com) //---><!-- For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/ //---><!-- This notice must stay intact for use //--->function populateSelect(selectobj){for (var i=0; i<picsarray.length; i++)selectobj.options[selectobj.options.length]=new Option(picsarray[i], picsarray[i])if (selectobj.options.length>1){selectobj.selectedIndex=0showpicture(document.getElementById("picsform").picslist)}}function showpicture(selectobj){piccontainerobj=document.getElementById("picturearea")resetfade(10)piccontainerobj.innerHTML='<img src="'+selectobj.options[selectobj.selectedIndex].value+'">'fadepictoview=setInterval("gradualfade(piccontainerobj)",50)}function resetfade(degree){if (window.fadepictoview)clearInterval(fadepictoview)if (typeof piccontainerobj.style.MozOpacity=="string")piccontainerobj.style.MozOpacity=degree/100else if (piccontainerobj.filters)piccontainerobj.filters.alpha.opacity=degree}function gradualfade(){if (typeof piccontainerobj.style.MozOpacity=="string" && piccontainerobj.style.MozOpacity<1)piccontainerobj.style.MozOpacity=Math.min(parseFloat(piccontainerobj.style.MozOpacity)+0.2, 0.99)else if (piccontainerobj.filters && piccontainerobj.filters.alpha.opacity<100)piccontainerobj.filters.alpha.opacity+=20else //if not IE or MozclearInterval(fadepictoview)}window.onload=function(){populateSelect(document.getElementById("picsform").picslist)}</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<div style="float: left; width: 200px;"><form id="picsform"><select name="picslist" size="4" style="width: 200px" onClick="showpicture(this)"></select></form></div><div id="picturearea" style="float: left; width: 400px; height: 300px; margin-left: 20px"></div><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


Files
http://javascriptbank.com/javascript/image/Dynamic_PHP_Picture_Viewer/getpics.txt