Need a Little Pop Up Window when thumbnail clicked

**kuau** · 02-03-2008, 11:48 PM

I have a tiny script that displays just certain images taken from a database using php.

Code:

<div class="thumb">
<a href="/img/<?=$lcArtist;?>/lg/<?=$title['filetag']?>.jpg"><img src="/img/<?=$lcArtist;?>/th/<?=$title['filetag']?>.jpg" 
alt="<?=$title['title']?> painting by <?=$tcArtist;?>" width='197' height='150'></a>
</div><!--End thumb-->

What it does right now when you click on the thumbnail is just open a white page with the larger image. What I would like it to do is open a popup window the way this script John Scheuer wrote does, but I don't know what parts of it to put above. Unlike the situation below, the one above does not take its image names from a folder, but from a database. Does this make any sense? John, please help! Thanks. Aloha, erin

Code:

var dimension="5x"+Math.ceil(galleryarray.length/5); //number of images across and down, such as 4x2, 3x1 etc
var imagepath="/img/<?=$lcArtist;?>/th/" //Absolute path to thumbnail image directory. Include trailing slash (/)
var href_target="new" //Enter target attribute of links, if applicable
var popupsetting=[1, "width=669px, height=691px, scrollbars, resizable"]
var descriptionprefix=[0, ""]
var gsortorder=""
var targetlinkdir="http://www.sargentsfineart.com/img/<?=$lcArtist;?>/lg/";  //large gallery
(function(){	
for (var i = galleryarray.length-1, j ; i > -1 ; --i)
for (j = slides.length-1 ; j > -1 ; --j)
if(slides[j][0].replace(/^.*\//,'') == galleryarray[i][0])
galleryarray[i][1]=slides[j][1];	
})();

**jscheuer1** · 02-04-2008, 12:33 PM

Actually, it was this function that did the 'heavy lifting' for the pop up:

Code:

function popuplinkfunc(imgsrc){
if (popupsetting[0]==1){
var desc='';
for (var i = galleryarray.length-1, lookup = imgsrc.href.replace(targetlinkdir,'') ; i > -1 ; --i)
if(galleryarray[i][0]==lookup)
desc=galleryarray[i][1];
var popwin=open('', "popwin", popupsetting[1]);
popwin.document.write('<title>'+desc+
'<\/title><body style="margin:0;padding:0;font:85% sans-serif;text-align:'+
'center;overflow:auto;background-color:#0d576d;color:white;"><img title="'+
desc+'" alt="Larger Image" style="margin:2px 0;" src="'+imgsrc.href+'"><br>'+desc);
popwin.document.close();
popwin.focus();
return false;
}
else
return true;
}

It did rely upon:

Code:

var popupsetting=[1, "width=669px, height=691px, scrollbars, resizable"]

and the array of images for settings and data respectively, as well as upon the location of the image as handed to it by the rest of the script when a thumbnail was clicked on.

What we could do is alter it slightly so that it is more independent and relies solely upon the a tag and the thumbnail's alt attribute for its data:

Code:

function popuplinkfunc(imgsrc){
var desc=imgsrc.getElementsByTagName('img')[0].alt;
var popwin=open('', 'popwin', 'width=669, height=691, scrollbars, resizable');
popwin.document.write('<title>'+desc+
'<\/title><body style="margin:0;padding:0;font:85% sans-serif;text-align:'+
'center;overflow:auto;background-color:#0d576d;color:white;"><img title="'+
desc+'" alt="Larger Image" style="margin:2px 0;" src="'+imgsrc.href+'"><br>'+desc);
popwin.document.close();
popwin.focus();
return false;
}

Now it can stand completely on its own and be called directly from your link:

Code:

<a onclick="return popuplinkfunc(this);" 
href="/img/<?=$lcArtist;?>/lg/<?=$title['filetag']?>.jpg">

**kuau** · 02-04-2008, 01:57 PM

Dear John: That was perfect!! It worked exactly the way I needed. Thank you SO MUCH!!! Your brilliance amazes me. Notice, not one other person even knew what I was talking about but you just whipped off the exact answer. You are the greatest!

Mahalo plenty! erin

**evan** · 02-06-2008, 07:01 PM

My Javascript is limited so I like to use CSS I just used a list as an example you can put the thumbnails into divs or tables.
Try this:

<html >
<head>

<title>layers Gallery</title>
<style>
#select{
position:absolute;
left:20px;
top:15px;
z-index:6;
visibility: visible;
width: 161px;
height: 18px;
}
b{
text-decoration:none;
color: #663300;
font-weight: bolder;
}
b:hover{
text-decoration:none;
color: #660000;
font-weight: bolder;
}

#a{
position:absolute;
left:100px;
top: 22px;
z-index:5;
width: 50px;
height: 50px;
visibility: visible;
}

#b{
position:absolute;
left:100px;
top: 22px;
z-index:10;
width: 50px;
height: 50px;
visibility: visible;
}

#c{
position:absolute;
left:100px;
top: 22px;
z-index:15;
width: 50px;
height: 50px;
visibility: visible;
}
</style>
</head>

<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
</script>

<body>

<div id="select">Look at my image gallery: (if you want thumbnails then replace the text)

<ul>
<li><b onClick="showmenu('a'); hidemenu('b');hidemenu('c');hidemenu">pic1</b></li>
<li><b onClick="showmenu('b'); hidemenu('a');hidemenu('c');hidemenu"> pic2</b></li>
<li><b onClick="showmenu('c'); hidemenu('a');hidemenu('b');hidemenu"> pic3</b></li>
</ul>

</div>

<div id="a">one</div>
<div id="b">two</div>
<div id="c">three</div>

</body>
</html>

**evan** · 02-06-2008, 07:03 PM

One mistake -I just noticed -for the layers that show the image, move the position of the div over -I messed that up

**kuau** · 02-07-2008, 06:42 PM

Dear Evan: Thanks! I forgot about doing it with css. I originally started with the DD php script that created a thumbnail gallery from all files in a particular folder (which really served me well). Thanks for reminding me about other methods. Maybe when I get everything caught up, I'll see if I can apply your method. I do have some css questions you may be able to answer which I'll ask under the css forum.

Mahalo, erin

**methdo** · 06-01-2008, 09:54 PM

Hi all. kuau could you show me how to pop a div window(in the center of screen with closed window button) when clicked over a thamnail? Furthermore, how to pass the div window with thamnail valu? I beh appy if you guyes help me here.Thanks

evan thanks i find your code usefule but how to pass those values in a div window instead of just showing it. I want to pass those values to div window and inside dv window i want a place html code but don't know how !!!

**kuau** · 06-01-2008, 10:10 PM

Dear methdo: (I hope your name doesn't mean you do meth!)

What you first wrote sounds like the DD Lightbox effect:

http://www.dynamicdrive.com/dynamici...tbox/index.htm

But then you added the edit. Could you please rephrase what you want? Not sure what you mean by passing the values of the thumbnail to a div window which wouldn't involve showing it (??) I'm sure someone here can help. kuau

**methdo** · 06-01-2008, 10:33 PM

kuau thanks your reply. Actually i want to do like this website but don't know how to make such div window and play video on it. http://www.mtraks.com/artist/enrique_iglesias/videos

I be happy if you help me make such div windo popup and pass it youtube url.Thanks

**Medyman** · 06-01-2008, 11:14 PM

@methdo: try any of these:

http://mjijackson.com/shadowbox/
http://www.jasons-toolbox.com/SlightlyThickerbox/
http://www.phatfusion.net/multibox/

Thread: Need a Little Pop Up Window when thumbnail clicked

Thread Tools

Search Thread

Need a Little Pop Up Window when thumbnail clicked

Try it with CSS

The Following User Says Thank You to Medyman For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions