PDA

View Full Version : Photo pop'up with a determined size



imv
08-17-2005, 01:43 PM
Hello I'm new here and I have used some scripts from dynamic drive in my pages. I got a Photography web page and I want to make some links to images and they will open in new pages (just like popups) but I prefer that the images open in all the size they have and without scrolling bars, any idea?? :confused:

I found this code but i can not combine with one of your scrits. The code is something like that:

javascript: newWindow = openWin(
'photo.jpg', 'cam1','width=250,
height=400,toolbar=0,location=0,directories=0,status=1,menuBar=0,scrollBars=0,resizable=1'
); newWindow.focus()

and i want to combine with this script: http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm

any idea ???
Thanks for all

anonymouse
08-17-2005, 08:47 PM
did you look at the image thumbnail viewer?
http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

you can use it with thumbnails or just text links and the photos will pop up in a little floating box...which you set the size for. The only thing is that it opens them on the same page, instead of in an external window, so you might not want too many on one page if they are large files. I just use it with a few photos.


Alternatively, you might want to use something like this:


<script>

var newwindow;
function pop(url)
{
newwindow=window.open(url,'name','height=120,width=500,resizable=yes');
if (window.focus) {newwindow.focus()}
}

</script>


If you have regular sizes for the photos, just duplicate the script, change the size and the function name [e.g.- function pop1(url)]

Then with this, you can use the motion gallery page you liked and in here:


<div id="motioncontainer" style="position:relative;width:400px;height:150px;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer"> <a href="javascript:pop('picturename.jpg');">Photo</a> <img src="dynamicbook1.gif" border=1></a> <a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a> <a href="http://www.dynamicdrive.com"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a></nobr>

</div>
</div>

just change that part to the javascript function and the name of your file.

etc, etc...

hope that helps.

edit: the cmotion gallery appears to have a thumbnail type viewer built in with the enlargeimage javascript function...so just change the size on that and that could work too.