Unique solution to an image gallery problem needed

simmonet

10-09-2003, 08:21 AM

I need to be able to specify an image swap on the click of a link

No problem there, tough there are a variety of way to do it - I chose to pass the variable in the URL

javascript:imagetoswap.src='pathto/someimage.jpg'

I need to have the image that is swapped clickable to popup a larger image

Right now the larger image is named the same as the smaller image with the prefix of b-

So ideally what I need is the ability to specify the first (small) image name variable and have the image src of the larger image calculated (add the prefix) and (ideally) dynamically inserted into the popup that is generated

that can be divided into two sections -

First calculate the new image name *or* define the image name in the original link (more work!)
Second - create the pop up and write the image src info (also the popup needs to have a 'close' text link - thi could be an existing hardcoded html page that one then specifies the .src of a dummy image or written 'on the fly'

All popups are one size - though would it be nice to have them resize to the image :-)

These sections are where I am having problems finding the easiest solution.

As for deployment, would prefer to use as an external .js file and because it deals with over 250 images (plus >250 of their enlargements) I wouldn't want to have to type all of them in more than once (not too worried about preloading and as there can potentially be more than 40 on one page it's not recommended)

All and any help appreciated, and if necessary this could be a consulting (paying) gig for the right (and bullet proof) solution.

TIA

Grant

kwhubby

10-10-2003, 09:30 AM

if i am understanding you correctly this is what you want.

this is a function for opening a popup with the an image with an image that has an added prefix of b- from the parameter used in executing the funtion (this is put in <script> tags in the head of document)

function popBimg(imgsrc) {
var bimgsrc = imgsrc.replace(/(\w+.gif)/, "b-$1")
var x = window.open()
x.document.write("<body><img src=" + bimgsrc + "></body>")
}

and basically to use it would have the image that gets swapt in a link send its srs of the image to the function...

like this

<a href="javascript:popBimg(document.getElementById('id name').src)"><img id="id name"></a>

simmonet

10-12-2003, 07:09 AM

mmm

I'm sure this does make sense, but I must be a little dense to get it's application correct as I haven't been able to adapt this to the use that I need it for.

If you are available for some consulting work please email me grant@simmonet.com

thanks

kwhubby

10-13-2003, 02:42 AM

why not post what u are trying to do with my script.... show us an example... that way we may be able to help

simmonet

10-13-2003, 07:34 PM

http://www.rwlm.com/catalog-test.html

I am using some different code that I originally develped that works fine in Apple's Safari, but not in IE Windows / Mac so obviously it's no good!

I took a different approach that required more typing (entering both image name variables) in the original links which is not a bad idea but doesn't cover someone clicking on the 'enlarge image' before clicking on a specific link.

My ideal *ideal* final output would be to open a blank window and write the popup dynamically so that th 'big' image is centered and that a 'close window' text link is also included in the page

For clarity I included the normally external code in the page...

Thanks

Grant

kwhubby

10-14-2003, 04:27 AM

dont do that approach... ill convert your page to use my methode..

simmonet

10-14-2003, 04:48 AM

Anything that gets this working is appreciated, and depending where you are there's a dinner on me at the least...

Thanks for your help...

Grant

kwhubby

10-14-2003, 05:02 AM

i modified that page... to make it simpler and use my method... here it is... (u do have to remove that extra .txt extension on the file name, to make it simply .htm) also.. the urls there arnt correct unless u post it directly to were ur page were the example was

simmonet

10-14-2003, 05:42 AM

First off, I'm on a Mac so it may just be that, BUT it 's not working...

I'll post a page and you can tell me if it's works for you then I'll know for sure it's an IE Mac issue

Thanks

Give me 5 mins to post

http://www.rwlm.com/test02.html

grant

kwhubby

10-14-2003, 06:00 AM

the problem is at

<a href="#" onClick="popBimg(document.getElementById('tbi').src)"><img src="product/lullaby/lul-puppies-oneinbox.jpg" name="product" width="239" border="0"></a>

u need

<a href="javascript:popBimg(document.getElementById('product').src)"><img src="http://www.rwlm.com/product/lullaby/lul-puppies-oneinbox.jpg" name="product" width="239" border="0" id="product"></a>

u changed the name.... so tbi does not exist...

simmonet

10-14-2003, 06:25 AM

THANK YOU THANK YOU THANK YOU

Now I just have to recode the links and all looks like it is working to spec

I can't thank you enough.. do you have an Amazon wish list or something?

Cheers

Grant

glenngv

10-14-2003, 06:25 AM

would this be of any help?

http://www.codingforums.com/showthread.php?s=&threadid=9836

kwhubby

10-14-2003, 06:30 AM

your welcome simmonet!... its my pleasure to help.

ps... if you have any gif images u want to use instead of just .jpg change this line

var bimgsrc = imgsrc.replace(/\/([A-Za-z0-9_-]+.jpg)/, "/b-$1")

to

var bimgsrc = imgsrc.replace(/\/([A-Za-z0-9_-]+[.jpg|.gif])/, "/b-$1")