...

View Full Version : Javascript and Pictures



treeleaf20
12-13-2010, 05:33 PM
All,
I have a PHP script that will get images out of the database and display them in a grid. I have two verisons. I save a thumbnail which I display and then a larger image in a different folder. These images are placed in a scroll bar but what I would like to happen is that when I click on a thumbnail it basically displays the bigger image until I click on that image and it goes away. I would love for the middle of the image to be displayed in the middle of the users screen but beggers probably can't be choosers in this case.

An example of a similar desired result is a link here:
http://qrayg.com/experiment/hig/

Instead of the hover, I'd like to utilize the onclick to display and remove the image. If it's easy to put the center in the center of the screen that that would be absolutely incredible as well.

Thanks for any guidance you could provide me on this.

Thanks in advance!

DrDOS
12-13-2010, 06:12 PM
http://ronbeau.50webs.com/Latest/snapshow.html

Sciliano
12-13-2010, 06:49 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dynamically Created Photo Gallery with Animated Image Fade-in, Click for Full-size</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

/* Dynamically Created Photo Gallery with Animated Image Fade-in, Click for Full-size */
/* Copyright 2009, Michael J. Hill. All rights reserved. Used with permission. www.javascript-demos.com */
/* Free use of the code, so long as the above notice is kept intact */

var imgPath = "./images/";

var dynamicImage = []; // file | width | height;
dynamicImage[dynamicImage.length] = "CBa.jpg | 185 | 225";
dynamicImage[dynamicImage.length] = "CB1.jpg | 160 | 170";
dynamicImage[dynamicImage.length] = "CB2.jpg | 215 | 300";
dynamicImage[dynamicImage.length] = "CBd.jpg | 140 | 250";
dynamicImage[dynamicImage.length] = "CB4.jpg | 125 | 185";
dynamicImage[dynamicImage.length] = "CB3.jpg | 185 | 200";
dynamicImage[dynamicImage.length] = "CBb.jpg | 160 | 175";

/* Do not edit below this line */

var loadingImageSrc = imgPath + "loading.gif";
loadingImage = document.createElement('img');
loadingImage.src = loadingImageSrc;
var grandLoadingGIF = document.createElement('img');
grandLoadingGIF.src = imgPath + "grand_loading.gif";
var sWidth = screen.width;
var sHeight = screen.height;
var fullSizePct = "";
var IE = navigator.appName == "Microsoft Internet Explorer" ? true : false;

function displayFull(){

var nV = document.documentElement.scrollTop;
var origWidth = popImg.width;
popImg.width = Math.round(origWidth * fullSizePct);
popDiv.style.left = Math.round((sWidth - popImg.width)/2) + "px";
popDiv.style.top = Math.round(((sHeight - popImg.height)/4) - (30 * fullSizePct)) + nV + "px";
}

function openFullSize(nSrc){

while (popDiv.lastChild)
{
popDiv.removeChild(popDiv.lastChild);
popDiv.style.top = "-10000px";
}
popImg = document.createElement("img");
!IE ? popImg.style.marginBottom = "-4px" : null;
popImg.alt = "Click to close";
popImg.title = "Click to close";
popDiv.appendChild(popImg);
nBody.appendChild(popDiv);
popImg.src = nSrc;
nShadow.style.width = document.documentElement.clientWidth + "px";
nShadow.style.height = document.documentElement.scrollHeight >= document.documentElement.clientHeight ? document.documentElement.scrollHeight + "px"
: document.documentElement.clientHeight + "px";
nShadow.style.display = "";
grandLoadingGIF.style.top = (document.documentElement.clientHeight / 2) - 16
+ document.documentElement.scrollTop + "px";
grandLoadingGIF.style.left = (document.documentElement.clientWidth / 2) - 16 + "px";
grandLoadingGIF.style.display = "";
setTimeout("displayFull()", 900);
popDiv.onclick = function()
{
nShadow.style.display = "none";
grandLoadingGIF.style.display = "none";
this.style.top = "-10000px";
while (popDiv.lastChild)
{
popDiv.removeChild(popDiv.lastChild)
}
}
}

function brushIn(nStaticImg){

var nOpacity = 0;
var nInterval = setInterval(function()
{
nOpacity < 100 ? nOpacity = nOpacity + 2 : clearInterval(nInterval);
IE ? nStaticImg.style.filter = "alpha(opacity = "+nOpacity+")"
: nStaticImg.style.opacity = (nOpacity / 100);
}, 25);
IE ? nStaticImg.detachEvent('onload', brushIn, false) : nStaticImg.removeEventListener('load', brushIn, false);
}

function init(){

var nLoadImg = "";
var nWrapper = "";
var imageArchive = [];
var nStaticImg = [];
var nDiv = document.getElementsByTagName('div');
for (i=0; i<nDiv.length; i++)
{
if (nDiv[i].className == "imgContainer")
{
var nContainer = nDiv[i];
}
}
fullSizePct = (nContainer.title.replace(/%/, "") / 100).toFixed(2);
nContainer.title = "Click Image to Enlarge";
var dynImgInfo = "";
for (i=0; i<dynamicImage.length; i++)
{
dynImgInfo = dynamicImage[i].split("|");
imageArchive[imageArchive.length] = [dynImgInfo[0], dynImgInfo[1], dynImgInfo[2]];
nStaticImg[nStaticImg.length] = document.createElement('img');
}
nContainer.style.visibility = "visible";
for (i=0; i<dynamicImage.length; i++)
{
nLoadImg = document.createElement('img');
nLoadImg.style.position = "absolute";
nLoadImg.style.backgroundColor = "#90ee90";
nLoadImg.alt = "";
nLoadImg.src = loadingImage.src;
nStaticImg[i].onload = function()
{
brushIn(this);
}
nStaticImg[i].src = imgPath + imageArchive[i][0];
IE ? nStaticImg[i].style.filter = "alpha(opacity = 0)" : nStaticImg[i].style.opacity = 0;
imageArchive[i][2] >= nContainer.clientHeight - 15
? imageArchive[i][2] = nContainer.clientHeight - 15
: imageArchive[i][2];
nStaticImg[i].height = imageArchive[i][2];
nStaticImg[i].width = imageArchive[i][1];
nStaticImg[i].style.position = "relative";
nStaticImg[i].style.cursor = "pointer";
nStaticImg[i].style.marginBottom = nContainer.clientHeight - imageArchive[i][2] - 12 + "px";
nStaticImg[i].onclick = function()
{
openFullSize(this.src);
}
nLoadImg.style.top = (imageArchive[i][2] / 2) - 12 + "px";
nLoadImg.style.left = (imageArchive[i][1] / 2) - 12 + "px";
nWrapper = document.createElement('div');
IE ? nWrapper.style.styleFloat = "left" : nWrapper.style.cssFloat = "left";
nWrapper.style.position = "relative";
nWrapper.style.paddingRight = "5px";
nWrapper.appendChild(nLoadImg);
nWrapper.appendChild(nStaticImg[i]);
nContainer.appendChild(nWrapper);
nBody = document.getElementsByTagName("body")[0];
popDiv = document.createElement('div');
popDiv.style.position = "absolute";
popDiv.style.top = "-10000px";
popDiv.style.cursor = "pointer";
popDiv.style.border = "1px solid black";
nShadow = document.createElement('div');
nShadow.style.backgroundColor = "#808080";
nShadow.style.position = "absolute";
nShadow.style.top = "0px";
nShadow.style.left = "0px";
nShadow.style.display = "none";
IE ? nShadow.style.filter = "alpha(opacity = 75)" : nShadow.style.opacity = .75;
nBody.appendChild(nShadow);
nBody.appendChild(grandLoadingGIF);
grandLoadingGIF.style.display = "none";
grandLoadingGIF.style.position = "absolute";
grandLoadingGIF.style.backgroundColor = "#90ee90";
}
}

IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
<style type="text/css">

body {margin-top: 200px;}
.imgContainer {position: relative; visibility: hidden; border: 1px solid black;
width: 800px; height: 225px; background-color: #f0fff0; margin-left: auto;
margin-right: auto; padding-left: 3px; overflow: auto; padding-bottom: 5px;}
.imgContainer img {margin-top: 3px; margin-bottom: 3px; border: 1px solid blue;}

</style>
</head>
<body>
<!-- title = the size at which the "full size" images will be displayed. -->
<div class="imgContainer" title="90%"></div>

</body>
</html>

treeleaf20
12-13-2010, 06:52 PM
Thanks for the replies. Since this is a dynamic gallery using PHP, how can I populate the image list:


var dynamicImage = []; // file | width | height;
dynamicImage[0] = "CBa.jpg | 185 | 225";
dynamicImage[1] = "CB1.jpg | 160 | 170";
dynamicImage[2] = "CB2.jpg | 215 | 300";
dynamicImage[3] = "CBd.jpg | 140 | 250";
dynamicImage[4] = "CB4.jpg | 125 | 185";
dynamicImage[5] = "CB3.jpg | 185 | 200";
dynamicImage[6] = "CBb.jpg | 160 | 175";

I would want to populate this with the PHP name and then I guess I would have to get the image width and height from getimagesize() in the PHP function.

Sciliano
12-13-2010, 07:02 PM
Use this instead, no numbers to make it easy to add/delete to/from the array:


var dynamicImage = []; // file | width | height;
dynamicImage[dynamicImage.length] = "CBa.jpg | 185 | 225";
dynamicImage[dynamicImage.length] = "CB1.jpg | 160 | 170";
dynamicImage[dynamicImage.length] = "CB2.jpg | 215 | 300";
dynamicImage[dynamicImage.length] = "CBd.jpg | 140 | 250";
dynamicImage[dynamicImage.length] = "CB4.jpg | 125 | 185";
dynamicImage[dynamicImage.length] = "CB3.jpg | 185 | 200";
dynamicImage[dynamicImage.length] = "CBb.jpg | 160 | 175";



The dimensions are the thumbnail dimensions. I assume that your thumbnails are all the same size, so just manually change those values to suit.

The full size image will open at it's actual full size, subject to the "title" value, in the markup, here:


<!-- title = the size at which the "full size" images will be displayed. -->
<div class="imgContainer" title="90%"></div>


meaning, the full-size image will display at 90% of its actual full-size.

Just use PHP echo, to insert the image file names in to the array. The same for the image path variable, echo the path.

treeleaf20
12-13-2010, 07:56 PM
So to get the image names I used the following code:


$qrypics = "Select * from pics where album_id='$album_id'";
$resultpics = mysql_query($qrypics);
while($resultsetpics = mysql_fetch_array($resultpics)){
echo "<li><a href=\"viewpics.php?pic_id=$resultsetpics[pic_id]&album_id=$resultsetpics[album_id]\"><img src=\"thumbs/$resultsetpics[name]\" alt=\"\" /></a></li>";


Would I load my array the same way?



var dynamicImage = []; // file | width | height;

$qrypics = "Select * from pics where album_id='$album_id'";
$resultpics = mysql_query($qrypics);
while($resultsetpics = mysql_fetch_array($resultpics)){
dynamicImage[dynamicImage.length] = "$resultsetpics[name] | 185 | 225";
}


Not sure how PHP works in Javascript.

treeleaf20
12-13-2010, 08:14 PM
Also, this is is close to what I'm looking for. Is there a way to stop it from loading and fading in the main images. I want it to just load the images like it normally would and then when I click on it do the fade and display the image quickly. This takes a while. How would I update that part of it?

treeleaf20
12-13-2010, 08:56 PM
So I went with the link that was originally suggested and I put it in my file. However I think that one works nicely when there aren't a lot of <div>'s and in mine I have a lot and just don't know what I need to update to achieve the same result. I figured I might as well post the whole page so sorry that it is kind of long but just wanted to give you a full idea:


<?php
session_start();
include "config.php";
$album_id = $_GET['album_id'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script src="js/bgstretcher.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
// Initialize Backgound Stretcher
$(document).bgStretcher({
images: ['images/bg1_new.jpg']
});
});
</script>
<script>
function doAction1()
{
alert("it is in action 1");
var my_outer = document.getElementById("outer");
my_outer.style.backgroundColor = "#000";
my_outer.style.width = screen.width+"px";
my_outer.style.height = 1500+"px";
var my_inner = document.getElementById("inner");
my_inner.style.left = this.myl;
my_inner.style.top = this.myt;
my_inner.style.display = "block";
my_inner.innerHTML="<img style=\"z-index:auto;opacity:1;\" src=\"upload/"+this.my_src+"\">";
my_inner.onclick = doAction2;
}
function doAction2()
{
var my_outer = document.getElementById("outer");
my_outer.style.backgroundColor = "Transparent";
my_outer.style.width = "10px";
my_outer.style.height = 1500+"px";
var my_inner = document.getElementById("inner");
my_inner.innerHTML = "";
my_inner.style.display = "none";
}
</script>
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen">
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">
ie_png.fix('footer, h1 a, nav li a, .inner');
</script>
<![endif]-->
</head>

<body id="page5">
<div class="extra">
<!-- content -->
<section id="content">
<div class="main">
<h1><a href="index.php">Website</a></h1>
<nav>
<?php
include "nav_buttons.php";
?>
</nav>
<div class="indent">
<section class="inner bg4">
<div class="indent">
<h2>photos</h2>
<div class="scroll scroll2">
<div class="scroll-inner">
<?php
$qryname = "Select name from albums where album_id='$album_id'";
$resultname = mysql_query($qryname);
$resultsetname = mysql_fetch_array($resultname);
?>
<h7>Album Name: <?php echo stripslashes($resultsetname['name']); ?></h7><br><br><a href="photos.php">Go back to all the photo albums</a><br><br>
<div class="gallery">
<ul>

<?php
$qrypics = "Select * from pics where album_id='$album_id'";
$resultpics = mysql_query($qrypics);
while($resultsetpics = mysql_fetch_array($resultpics)){
echo "<li><img src=\"thumbs/$resultsetpics[name]\" alt=\"\" onClick=\"doAction1()\"/></li>";

}
?>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="block"></div>
</section>
</div>
<!-- footer -->
<?php
include "footer.php";
?>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Century_Gothic_400.font.js"></script>
</body>
</html>

Sciliano
12-14-2010, 01:30 PM
treeleaf20:

Use this instead. Note the <div> surrounding the photo gallery.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Centered, Auto Full-Size Image With Caption From Thumbnail, Unobtrusive &amp; Accessible</title>
<script type="text/javascript">

var sWidth = screen.width;
var sHeight = screen.height;
var nV = 0;

function displayFull(){

var nContainer = document.getElementById('imgContainer');
nContainer.style.left = Math.round((sWidth - document.getElementById('nullImg').width)/2) + "px";
nContainer.style.top = Math.round(((sHeight - document.getElementById('nullImg').height)/4) - 30) + nV + "px";
}

function openFullSize(nSrc,nCap){

document.getElementById('nullImg').src = nSrc;
document.getElementById('imgCaption').innerHTML = nCap;
setTimeout("displayFull()",1000); // you may need to "adjust" the 1000;
}

function stayHome(){

nV = document.documentElement.scrollTop;
setTimeout("stayHome()", 150);
}

function init(){

var nGallery = document.getElementById("photoGallery").getElementsByTagName("a");
var index = 0;
for (i=0; i<nGallery.length; i++)
{
nGallery[i].onclick = function()
{
nDiv.style.top = "-2000px";
openFullSize(this.firstChild.src, this.firstChild.alt);
return false;
}
nGallery[i].href = "#";
nGallery[i].id = "n" + index++;
}
var nBody = document.getElementsByTagName("body")[0];
var nDiv = document.createElement("div");
var nImg = document.createElement("img");
var nCaption = document.createElement('div');
nDiv.id = "imgContainer";
nImg.id = "nullImg";
nImg.alt = "Click to close";
nImg.title = "Click to close";
nCaption.id = "imgCaption";
nDiv.appendChild(nImg);
nDiv.appendChild(nCaption);
nBody.appendChild(nDiv);
nDiv.style.cursor = "pointer";
nDiv.style.position = "absolute";
nDiv.style.top = "-2000px";
nDiv.style.border = "1px solid black";
nDiv.onclick = function()
{
this.style.top = "-2000px";
}
nCaption.className = "caption";
stayHome();
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
<style type="text/css">

body {background-color: #f0fff0;}
.caption {font-family: tahoma; font-size: 14pt; text-align: center; color: #4169e1;
background-color: #ffffe0; padding-top: 1px; padding-bottom: 1px;}
.thumbNail {width: 400px; background-color: #f6eabc; border: 1px solid black; text-align: center;
position: relative; top: 500px; margin-left: auto; margin-right: auto;}
.thumbNail img {border: 2px solid blue; margin-left: 15px; margin-top: 5px; margin-bottom: 0px;}

</style>
</head>
<body>
<div id="photoGallery" class="thumbNail">
<a href='images/CB1.jpg'><img src='images/CB1.jpg' width='96' height='96' alt='First Image Description' title='First Image Description'></a>
<a href='images/CB2.jpg'><img src='images/CB2.jpg' width='64' height='96' alt='Second Image Description' title='Second Image Description'></a>
<a href='images/CB3.jpg'><img src='images/CB3.jpg' width='128' height='85' alt='Third Image Description' title='Third Image Description'></a>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum