Photo Album - Javascript Help Please!

  Ben Avery 09:56 20 Jan 04
Locked

G'day,

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).

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"!)

*****************************************************************************

The four buttons are as follows:

BUTTON 1 - "Add Picture"

* 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

  Taran 12:29 20 Jan 04

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.

T

  Ben Avery 12:42 20 Jan 04

Once again, thank you for your reply - bizarre as it is, I'm currently in the process of downloading fireworks as I wondered if it'd help (70% at the mo!)

My main query is this, if the main images are 1600x1200 in size, wouldn't a gallery of thumbnails take forever to download (An entire wedding day remember!) or can you use separate thumbnails like I have done above?

BA

  Ben Avery 12:49 20 Jan 04

I meant to say that if this is going to be too much trouble, I have yet another idea to simplify the process. I could always keep the album as it is and create a list in another cell to the left so that each image has a physical hyperlink on the same screen.

Theory being this:

On the left of the table you have a cell/group of cells containing 01.jpg, 02.jpg, 03.jpg etc etc and each one linkt to the actual photo xx.jpg

To access these pictures, I could use either the target="_blank" command for popup control or allow people to right click and "Save picture as".

However this will also require a piece of (likely very simple) javascript command, so that when you click on the Next Image button, the image filename (e.g. "01.jpg") shows on the screen above the photo album.

That way, people will be able to flick through the images, choose the ones they like and have the reference number of the photo so that they can download the correct picture using one of the above methods (popup or "Save picture as")

What would I type in to accomplish this much simpler technique and then I can dispose of both of the other buttons completely?

BA

  Ben Avery 12:51 20 Jan 04

I could physically add a reference number to each and every thumbnail using my photo software but I'm guessing there's a much easier way?!

BA

  Taran 14:10 20 Jan 04

The Dreamweaver option I mentioned to 'Create web photo album' is about as simple as it gets. Make a folder anywhere you like. Put all of your full sized images into it.

Run the command and follow the prompts.

Select how and where you want the thumbs and images to be displayed. Fireworks runs a batch process and delivers copies of all the images as thumbs in a thumbnail gallery [several thumbnail galleries if you have lots of images]. You choose how many thumbs per page and the navigation structure. Fireworks delivers the results to your web root folder as a series of sub-folders and HTML pages.

The Photo Album extension I mentioned has more configuration options for you to tweak, but it follows more or less the same process and it's free to register for the Macromedia Exchange [all it takes is an email address and password] and many of the extensions are free for all Macromedia products.

The PHP gallery project I linked to is superb. Easy to use, advanced features, on the fly thumbnail and image generation from your source images...

Photoshop, Ulead PhotoImpact and Fireworks can all output web image galleries in a snap, largely following a similar process to the above. All they require is a source folder with your images in it and the destination you want them saved in. A few point and click choices gives you your required output and from then on you can teak things to your hearts content.

If you don't like the layout or want to change page backgrounds and so on, you can always link the gallery files to a Dreamweaver template and apply it to the entire gallery. The advantage is that it doesn't matter if you have ten or one hundred images, the process remains the same and the software outputs based on your choices.

Customisation can follow, but it's about the fastest method I know of for producing web galleries.

T

  Taran 14:12 20 Jan 04

One very easy way to proceed would be to use a single inline frame.

A series of hyperlinks could call each image into the inline frame while the rest of the page remains the same...

  Ben Avery 14:34 20 Jan 04

Thanks again - I looked at the frames idea but have desparately tried to keep the site frame-free as I really don't like working with them.

I could do it with frames without a problem but again, if the user's browser doesn't support I'm done for anyway!

I've designed a quick page on the new concept I was describing and can be found here http:/benavery.co.uk/phototest2.html

As I mentioned earlier, if given a facelift this could prove to be my easiest and most effective option - it's very user friendly and will all stay on one screen.

However, I would need the image reference to appear above the image so that people know which one to click on when downloading. Do you get what I mean?

If so, do you know how I would do it?

Fireworks was good but not exactly what I was after - not to mention that by the time the pictures are ready my 30 days will have long expired!!!

:o)

BA

  Ben Avery 16:23 20 Jan 04

I've acquired some code which works fantastically on my original idea. I'll post it below - I wonder if you'd do me the honours of explaining to me how it works with images?

I know you're a clever chap with all this and have a way of explaining things which I understand!

*************************************************************************

CODE:

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>")

}

*************************************************************************

In the "img src=" section the following code has been added:

*************************************************************************

CODE:

<a href="javascript:Zoom()"><img src="Temp/zoom.gif" width="40" height="40" alt="Zoom Image" border=0></a>

*************************************************************************

I assume it's this line:

var bigPix = viewPix[thisImage].substring(0,src-5) + viewPix[thisImage].substring(src-4,src)

...which is doing the clever stuff but don't understand how!

BA

  Ben Avery 16:25 20 Jan 04

code has scrambled a little - will try again:

CODE:

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>")

}

  Taran 22:22 20 Jan 04

In simple terms, it's an instruction that takes a picture [thisImage], alters its dimensions with the Zoom function, then puts the results in a new document window [newWin.document.write] by wrapping it in HTML output snippets.

If you put the HTML code snippets together from the newWin.document.write parts of thre JavaScript, you get a pretty ordinary page with a self closing hyperlink, as follows {note that the link will appear as a click here}:

<HTML>

<head>

<title>" + bigPix + </title>

</head>

<body>

<center>

<img src='" + bigPix + "' border=0>

<br><br>

<a href=' onClick='self.close()'>Close this Window</a>

</center>

</body>

</html>

In fact, if you read through it step by step it more or less explains itself and the whole putput is controlled in the HTML wrap.

T

This thread is now locked and can not be replied to.

Best phone camera 2016/2017: Galaxy S7 vs iPhone 7 vs Google Pixel vs HTC 10 Evo vs OnePlus 3T vs…

1995-2015: How technology has changed the world in 20 years

Best Christmas Agency Projects of 2016

Super Mario Run preview | Hands-on first impressions of Super Mario Run: Mario's iPhone & iPad…