As per usual, I'm stuck again (likely trying to bite off more than I can chew - or run before I can walk)!
Thing is, in August me and Leah are getting married and I've told people that I'll make all the photographs available to download and print from my site (save me printing hundreds myself). I've decided on the type of display style I want and have knocked it up on a quick page (which you can see if you click here (http://benavery.co.uk/phototest.html)).
I have 2 of the 4 buttons functioning as I wanted but need help on the script for the other 2 buttons - one of which I feel may be impossible (but actually won't matter as I have a "Plan B"!)
* This is the one I'm having doubts about whether it will be possible or not. What I ideally would like is some way of letting people add photo's to a storage area (like a shopping cart idea) and when they are finished, download the pictures as one group of files. If this is impractical, them I will advise them to download each picture they want using either a different button (in that instead of a "Add Picture" button I will have a "Download" button) or telling the to open in full screen window (See BUTTON 4) and right clicking and choosing "Save picture as".
BUTTON 2 - "Previous Image"
* This one was easy, I've got this one functioning fine using a javascript command from Bravenet
BUTTON 3 - "Next Image"
* Again, this button functions fine.
BUTTON 4 - "Zoom Image"
* When clicking on this button, I want the image displayed above to open in a new window, full size. Say for arguments sake the images (which will all be the same size when uploaded) are 800x600 in size, then I want a window to open which will contain the picture full size at 800x600 and give the option to close window using the "JavaScript:window.close()" command.
Right, now at present I have saved 3 pictures from Banham Zoo to test out the theory of the photo album. Each picture has been saved twice, once full size and once optimised for the window. i.e. the original picture is 1600x1200 and called 01.jpg and the "thumbnail" which displays on screen is 300x225 and called 01t.jpg. This was done a) to speed up the photo album and b) to ensure the pictures look their best on screen whilst using the photo album.
So now the million $ question...can anyone help with the commands to achieve my end goal or am I being far too complicated??
BA
gil davis
01-20-2004, 07:55 AM
Originally posted by benavery
BUTTON 1 - "Add Picture"This would require server side code. If you absolutely have to have it, investigate PHP or ASP.
BUTTON 4 - "Zoom Image"I have an example you might like at http://gil.davis.home.att.net/openit_example.htm . It will size to the image or the user's screen - whichever is smaller - and center the window. If you want it to go full size regardless of the user's resolution, I could modify it to do that. It would not affect the viewer's ability to dl the image correctly anyway.
benavery
01-20-2004, 08:22 AM
Thanks for the post.
The only problem is, as you can see from my source code, the images aren't "href" codes so don't seem to accept standard commands like target="_blank" and I can't seem to get them to hyperlink.
I've been told that I'm likely trying to make things too complicated. A very good web designer posted this to my PCA forum thread:
I'd say you're being overly complicated and a few points come to mind. Pop-up killers could well knock the whole system sideways and even though it is for friends and family it should be usable without asking people to turn of or disable any security software they may be running.
Have you looked at the Dreamweaver tool you can reach in: Commands, Create web photo album.
Assuming you have Fireworks installed [free 30 day trial can be downloaded from the Macromedia site] it creates a thumbnail gallery from a folder of images and lays out a series of text navigation links leading to full size image pages and saves it in a gallery folder within your main site root folder.
There's a free extension at the Macromedia Exchange site which has the original name of 'Create web photo album 2.1'. It is broadly similar to the original Create web photo album command built into Dreamweaver but has quite a few more bells and whistles.
The Java command for pulling a copy of the image into a new browser window is a simple hook and there are more ways of doing this than you could shake a stick at. If you want some examples get back to me.
The easiest way I can think of for you is by using the Dreamweaver tools you have available to you now: try the behaviour to open a new browser window - find it on the Design panel next to CSS Styles, and HTML Styles. Fill in the prompts to open the image and tell it whether you want an address bar, navigation bar and so on present. You won't get the JavaScript 'close browser window' button you mention, but you could add it, and one advantage is that it doesn't require an HTML parent document for the image - it will open the image on its own in a new browser window.
There are loads of ways of doing galleries and most high end image editors can produce some pretty impressive results.
If your web host supports PHP there is a superb gallery project available for you click here which allows on the fly image processing for thumbnails, user accounts, authentication and so on.
An automated JavaScript gallery I wrote a year or two ago changes the image at a time delay chosen by you and scrolls through a gallery of pictures, repeating as long as the browser window is left open. Each picture also has a Java hook applied to it, so by clicking the picture you open a new browser window with that picture displayed while the rest of the gallery continues to scroll in the background. That could be built on, so if you want to take a look I'll rummage around and dig out the backup source code files and email them to you.
Any of the JavaScript sites have more galleries than you could want to play with, so take a look and see what you can find. Your intended way of processing the images could lead to problems though, depending very much on browser versions, JavaScript support and security software.
I'd look to something a little simpler or that will not be affected by software.
I replied by saying that I think it'll be easier to change my theory as it's obviously far from simple to put into operation how I wanted it.
What I think I'll do is change the format totally and now the only script I will need it one where, everytime I click on the "Next Image" button, the filename of the photo (e.g. "01.jpg") displays below or above the image.
I can then use a list to the left starting from 01.jpg, 02.jpg, 03.jpg etc and people can save the full size images by right clicking on them or opening them in a new window (I can also then add target="_blank" command).
How do I do this?
BA
I'll post a new thread to ask this query
jaegernaut
01-20-2004, 08:31 AM
Just an alternative method to do your Button 4:
function winOpen()
{
var src = viewPix[thisImage].length
var bigPix = viewPix[thisImage].substring(0,src-5) + viewPix[thisImage].substring(src-4,src)
newWin = window.open("", "Zoom", config="height=600,width=800");
newWin.document.write("<HTML><head>")
newWin.document.write("<title>" + bigPix + "</title></head>")
newWin.document.write("<body><center><img src='" + bigPix + "' border=0><br><br>")
newWin.document.write("<a href='' onClick='self.close()'>Close this Window</a>")
newWin.document.write("</center></body></html>")
}
Then just an onClick in your img tag:
<img src="Temp/zoom.gif" onClick="winOpen();" width="40" height="40" alt="Open full size in new window">
I just saw your post, and this won't get around popup killers, but I thought I would post this anyway.
benavery
01-20-2004, 08:44 AM
Fantastic!!!
Just a couple of tweaks if you wouldn't mind, how can I get the hand cursor added to it and change the window opening size to fullscreen instead of 600x800??
You are a star!!!
BA
jaegernaut
01-20-2004, 08:58 AM
You can change the height and width attributes to 100% to get to open full size.
When you say Hand Cursor, are you talking about having it so that when you mouse over your Zoom graphic the Hand appears to let the user know they can click on it?
If so you can make your img an href like so:
<a href=""><img src="Temp/zoom.gif" onClick="winOpen();" width="40" height="40" alt="Open full size in new window" border=0></a>
OR
<a href="javascript: winOpen();"><img src="Temp/zoom.gif" width="40" height="40" alt="Open full size in new window" border=0></a>
// remove the onClick from the image tag
Make sure to add the border=0 attribute so that you don't get that annoying border on your graphic.
benavery
01-20-2004, 10:39 AM
So how does it all work then?!!!
It's great code - thanks!
BA
jaegernaut
01-20-2004, 10:54 AM
I wonder if you'd mind letting me know how it works? I can't get my head around how the zoom button manages to work out that it need the larger image 01.jpg instead of the thumbnail, which is 01t.jpg?
Basically its this code that does the work:
var src = viewPix[thisImage].length
var bigPix = viewPix[thisImage].substring(0,src-5) + viewPix[thisImage].substring(src-4,src)
src is just so you don't have to write "viewPix[thisImage].length" over and over.
bigPix is what resets the file name to match the larger file. This only works if you continue your formate of 01.jpg and 01t.jpg. It won't matter how high the numbers go because I'm just moving the last 4 chars over.
Example:
thumbnail file: "Temp/01t.jpg"
The first part of bigPix picks up everthing upto (but not including) the "t".
The second part of bigPix picks up the last four chars, i.e. ".jpg".
Then it puts them together, "Temp/01" + ".jpg", which of course is the filename of the big picture "Temp/01.jpg".
So even if your file name was "Temp/010101010101010t.jpg" it would still work as long as the large filename was the same minus the "t", and they are in the same (Temp) directory.
Did that make sense?
benavery
01-20-2004, 06:39 PM
Perfect sense - and once again, thank you!
Ben
benavery
01-28-2004, 08:40 AM
Now that the photo's are working, how can I get the image FILENAME (e.g. 01.jpg) to appear above the actual image itself?
The photo album will contain over 200 photo's when complete and so I could do with a reference for each photo to be displayed above the image and will later create a page containing a list of images to be saved. This will require people knowing what images they want though!
I'm also toying with the idea of adding a way of improving navigation, so that if you only have time to browse 50 photo's at a time, you don't have to click "Next" 50 times on your return (Maybe a set of -10/+10 images buttons?) How would I implement this?
BA
jaegernaut
01-28-2004, 08:50 AM
The variable bigPix has the value of the filename, so you can just do this where you want the name to appear:
*edit: actually the bigPix variable is local to the funciton, so if you want to write out the name on the main page you will need to reference it like document.write(viewPix[thisImage].substring(0,src-5) + viewPix[thisImage].substring(src-4,src)) * end edit
Now that will work fine if you are displaying it on the main page, but if you want to display it in the popupwindow change this line:
In regards to the -10/+10 buttons, you could set up a script that would adjust the index number in your array so that it showed the image -10 or +10 further along. I don't have the time to write it out now but give it a try and let me know how it goes.
jaegernaut
01-28-2004, 09:19 AM
Okay, I made some changes to get the filename written properly.
I changed the 3 function to this:
<script language="JavaScript">
<!--
var viewPix = new Array("Temp/01t.jpg","Temp/02t.jpg","Temp/03t.jpg")
var thisImage = 0
function winOpen()
{
var src = viewPix[thisImage].length
var bigPix = viewPix[thisImage].substring(0,src-5) + viewPix[thisImage].substring(src-4,src)
newWin = window.open("", "Zoom", config="height=600,width=800");
newWin.document.write("<HTML><head>")
newWin.document.write("<title>" + bigPix + "</title></head>")
newWin.document.write("<body><center>" + bigPix + "<br><img src='" + bigPix + "' border=0><br><br>")
newWin.document.write("<a href='' onClick='self.close()'>Close this Window</a>")
newWin.document.write("</center></body></html>")
}
Thanks so much for your help. I'm getting there and have altered a few things (Now have the Previous, Zoom and NExt working as well as a text bow displaying the filename) but cannot get the code working for the +10/-10 bit.
Could you have a look at my code below and alter as required please? I'm sorry to be such a pain!
<body bgcolor="#333333" text="#000000" link="#000099" vlink="#000099" alink="#000099">
<div align="center">
<table width="750" border="0" background="Images/authorised.jpg" cellpadding="0" cellspacing="0">
<tr>
<td width="750" valign="top" height="80">
<div align="center"><a href="home.html"><img src="Images/photos.jpg" width="750" height="50" border="0"></a><br>
<font face="Verdana, Arial, Helvetica, sans-serif" size="4"><b>Low Resolution
Images</b></font> </div>
</td>
</tr>
</table>
<table width="750" border="0" background="Images/background.jpg" cellpadding="0" cellspacing="0">
<tr>
<td width="750" valign="top" height="470">
<blockquote>
<p align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Photo
Album Test Area</font></b> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">
<script language="JavaScript">
<!--
function Zoom()
{
var src = viewPix[thisImage].length
var bigPix = viewPix[thisImage].substring(0,src-5) + viewPix[thisImage].substring(src-4,src)
newWin = window.open("", "Zoom");
newWin.document.write("<HTML><head>")
newWin.document.write("<title>" + bigPix + "</title></head>")
newWin.document.write("<body><center><img src='" + bigPix + "' border=0><br><br>")
newWin.document.write("<a href='' onClick='self.close()'>Close this Window</a>")
newWin.document.write("</center></body></html>")
window.photoname.value=viewPix[thisImage].substring(7,viewPix[thisImage].length-5) + viewPix[thisImage].substring(viewPix[thisImage].length-4,viewPix[thisImage].length)
}
var viewPix = new Array("LowRes/01t.jpg","LowRes/02t.jpg","LowRes/03t.jpg","LowRes/04t.jpg","LowRes/05t.jpg","LowRes/100t.jpg")
var thisImage = 0
function Previous() {
if (document.images && thisImage > 0) {
thisImage--
document.myShow.src=viewPix[thisImage]
window.photoname.value=viewPix[thisImage].substring(7,viewPix[thisImage].length-5) + viewPix[thisImage].substring(viewPix[thisImage].length-4,viewPix[thisImage].length)
}
}
function Next() {
if (document.images && thisImage < 5) {
thisImage++
document.myShow.src=viewPix[thisImage]
window.photoname.value=viewPix[thisImage].substring(7,viewPix[thisImage].length-5) + viewPix[thisImage].substring(viewPix[thisImage].length-4,viewPix[thisImage].length)
}
}
// -->
</script>
</font>
<p align="center"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
Please note this is a test area only and so is not fully functional
at present. This area will later be used to display our wedding photographs
but at present is being tested with some images I took at Banham Zoo
in Norfolk, UK </font>
<p align="center"><input type="text" name="photoname" size="20" style="font-family: Verdana" value="01.jpg"><br>
<img name="myShow" src="LowRes/01t.jpg" width="300" height="225" border="1"><br>
<br>
<a href="javascript:Previous()"><img src="LowRes/back.gif" width="40" height="40" border="0" alt="Previous Image"></a>
<a href="javascript:Zoom()"><img src="LowRes/zoom.gif" width="40" height="40" alt="Zoom Image" border=0></a>
<a href="javascript:Next()"><img src="LowRes/fwd.gif" width="40" height="40" border="0" alt="Next Image"></a>
</blockquote>
</td>
</tr>
</table>
</div>
</body>
</html>
BA
jaegernaut
01-28-2004, 10:32 AM
Check the previous post. I've changed the function call to pass a value, 1 or 10, and then the function takes that value and increments the "thisImage" variable appropriately.
You've changed the function names, so keep that in mind while looking at my code.
Let me know if you have questions on getting that piece integrated.
benavery
01-29-2004, 05:35 AM
Thanks so much for your continued help. I have now got it almost fully functional as I wanted it with your valued assistance.
The revised test page is located here (http://benavery.co.uk/phototest.html) and as you can see, works much better (although there are only 6images there at present, your theory is proving to work so I see no problem when the images increase to over 200!)
Just one thing more I would like to add if it's not too difficult.
As you can tell, the images are always "active" in the sense that they all LOOK like they do something. Would there be a simple way to add a further 4 images into the image folder (grayscale versions of the "fwd", "fwd10", "back" & "back10" gif images) and have it so that on image 1 (01t.jpg/01.jpg) the back & back10 buttons take on the form of the grayscale image and have no "click" function and that same at the other end so that when you reach the last image, the fwd & fwd10 buttons take on the grayscale images and also have no "click" function?
It doesnt matter if not because I can say on the finished page exactly how many images there are and people should be able to work it out!
Cheers.
BA
clairec666
01-29-2004, 05:41 AM
It would be possible to do that.
Use an 'if' statement to test whether the current picture is the first/last picture, and if it is true, cange the src of the forward/backward image to the inactive version.
benavery
01-29-2004, 06:20 AM
Sounds like just the ticket!
Thing is, I'm a dunce and without the help of Jaegernaut I wouldn't have got to this point!
Could you tell me how to do what you suggest please? Let's say the images are as follows:
ACTIVE BUTTONS (colour images)
Back 10 images = "LowRes/back10.gif"
Back image = "LowRes/back.gif"
Forward image = "LowRes/fwd.gif"
Forward 10 images = "LowRes/fwd10.gif"
I've set the site up in the hope it will run in Netscape and Opera too (just in case) but it would appear that the text box doesn't function at all in Netscape and formats incorrectly in Opera!
Any ideas on how to resolve problems? Or even what is causing them!
BA
jaegernaut
01-29-2004, 08:13 AM
Some new code for you.
I've got this working so that the "graybtn.gif" shows for the inactive buttons. The graphic will still be clickable, but it won't matter as the function makes sure that you don't go beyond the last graphic or the first graphic.
Check it out and see if this will work for you.
functions *Note: I removed your first line of code as it was not needed.
function doPast(e) {
if (thisImage - e < 0)
{
thisImage = 0;
} else { thisImage-= e }
document.myShow.src=viewPix[thisImage]
filename.innerHTML = "Image name:" + viewPix[thisImage].substring(0,viewPix[thisImage].length-5) + viewPix[thisImage].substring(viewPix[thisImage].length-4,viewPix[thisImage].length)
if (thisImage == viewPix.length -1)
{
next.src = "graybtn.gif";
} else { next.src = "Temp/fwd.gif"; }
if (thisImage + 10 > viewPix.length -1)
{
next10.src = "graybtn.gif";
} else { next10.src = "Temp/fwd.gif";}
if (thisImage - 10 >= 0)
{
back10.src = "Temp/back10.gif";
} else { back10.src = "graybtn.gif";}
if (thisImage - 1 >= 0)
{
back.src = "Temp/back.gif";
} else { back.src = "graybtn.gif";}
Buttons: *added name to graphic and initialized Back buttons with graybtn as in the beginning they won't be able to move back.
<a href="javascript:doPast(1)"><img src="graybtn.gif" name="back" width="40" height="40" border="0" alt="Previous Image"></a> <a href="javascript:doPast(10)"><img src="graybtn.gif" name="back10" width="40" height="40" border="0" alt="Back 10 images"></a>
<a href="javascript:doAfter(1)"><img src="Temp/fwd.gif" name="next" width="40" height="40" border="0" alt="Next Image"></a> <a href="javascript:doAfter(10)"><img src="Temp/fwd.gif" name="next10" width="40" height="40" border="0" alt="Forward 10 Images"></a>
I still haven't changed the function names, so be aware of that.
Let me know if that works out.
Just saw your other post. I have to go for the moment, but will check that out shortly.
benavery
01-29-2004, 08:50 AM
I can't seem to get that code to work?
It is probably down to the changes in code I made shorly after posting the original thread and so now I'm getting confused as to where things should be!
My fault I apologise.
The code I am using now is found at http://benavery.co.uk/phototest.html and is as follows:
<script language="JavaScript">
function Zoom()
{
var src = viewPix[thisImage].length
var bigPix = viewPix[thisImage].substring(0,src-5) + viewPix[thisImage].substring(src-4,src)
newWin = window.open("", "Zoom");
newWin.document.write("<HTML><head>")
newWin.document.write("<title>" + bigPix + "</title></head>")
newWin.document.write("<body><center><img src='" + bigPix + "' border=0><br><br>")
newWin.document.write("<a href='' onClick='self.close()'>Close this Window</a>")
newWin.document.write("</center></body></html>")
window.imageRef.value=viewPix[thisImage].substring(7,viewPix[thisImage].length-5) + viewPix[thisImage].substring(viewPix[thisImage].length-4,viewPix[thisImage].length)
}
var viewPix = new Array("LowRes/01t.jpg","LowRes/02t.jpg","LowRes/03t.jpg","LowRes/04t.jpg","LowRes/05t.jpg","LowRes/100t.jpg")
var thisImage = 0
function Previous(e) {
if (document.images && thisImage > 0)
{ if (thisImage - e < 0)
{
thisImage = 0;
} else { thisImage-= e }
document.myShow.src=viewPix[thisImage]
window.imageRef.value=viewPix[thisImage].substring(7,viewPix[thisImage].length-5) + viewPix[thisImage].substring(viewPix[thisImage].length-4,viewPix[thisImage].length)
}
}
function Next(a) {
if (document.images && thisImage < 5)
{ if (thisImage + a > viewPix.length - 1)
{
thisImage = viewPix.length -1
} else { thisImage+= a }
document.myShow.src=viewPix[thisImage]
window.imageRef.value=viewPix[thisImage].substring(7,viewPix[thisImage].length-5) + viewPix[thisImage].substring(viewPix[thisImage].length-4,viewPix[thisImage].length)
}
}
</script>
The text box which is displaying the image name is as follows:
Maybe the changes in the script are stopping the code you sent me working? As you can see the file locations are as they will appear on the site:
Images = "LowRes" Folder
HTML pages in root directory
Also, for some reason, when I use your code "java script" it doesn't work? It only works without the space "javascript". Strange!
BA
benavery
01-29-2004, 08:57 AM
Oh, it does that to all javascript it would appear!
that makes sense!
BA
jaegernaut
01-29-2004, 09:14 AM
Yeah, when you post code in the forum it seems to put a space in the word, and then also creates line breaks as well.
I'm going to be pretty busy for the rest of the day, so I may not get to this until tomorrow.
Post me an update on where you are at as far as what is working and what is not, and I'll look at it when I'm in next. Maybe someone else will also volunteer to help you out while I'm away.
benavery
01-29-2004, 09:23 AM
With the code and page setup as it is now on my site, everything works in IE and Opera browsers but the text box (used to display the image name) does not work in Netscape.
That's all!
The only other thing that the new page forat and code doesn't achieve is the use of greyed out buttons on the first and last image (although this is not of uppermost importance, it would be good)
That's how it stands at present!
BA
benavery
01-29-2004, 09:32 AM
If it helps, I've uploaded a WinZip file containing all the images, backgrounds and the webpage itself onto my site here (http://benavery.co.uk/Temp/photo.zip). Zip file is 437KB.
If you want to download it, when you extract the contents, it will extract into the same folders as it appears on the site, this way, if you want to test any theorys, it will be using the most up-to-date code and should alleviate any problems.
Cheers
BA
jaegernaut
01-29-2004, 10:33 AM
I've attached the zip file. I only included the revised phototest page and the new gray graphics I made to verify change.
Make sure not to overwrite your original files until you have tested this.
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.