Image Pop Up

[sandyk3]

Hi Everyone,

John - I think you can solve this if you are out there and I thank you in advance. First - yes, I'm still working on Birdland!! Getting the content is worse than pulling teeth!! This is the hardest client yet.

Okay, the nursery page - it was decided that this page, unlike the product page will not have the rollover as there is just not enough text for each image. I put each image in a list and I am including a title. I've put this all in a table as it is data. I have the normal page opening up each image in a _blank page. What I would like is to assign each image the behavior of opening a new pop up. I've learned how to do this but I cannot get rid of the _blank. I have tried every way, calling the img src my object, calling the a href the object - including "a href" and not including it. I've left the target=_blank in and I've taken it out. I have the first five images in the table tested and the African Grey is the one I said my object was "a href="images/africangreybaby.jpg".

Does anyone have any idea on how I can make this work. I have looked over the net for the answer including Adobe help for DW and I still come up empty. I am not at all upset if I have to put this page up with the image opening in a new window all together.

The nursery page is the only one done. Nothing else is done on the site.. like I said.. content is slow. I also replaced the header image.. before it was the dark store.. now.. light and airy.

Thank you everyone for any help you can give in advance.

Sandy K
http://sandysdesignline.com/feather526/nursery.html -normal
http://sandysdesignline.com/feather526/nurseryb.html -testing

[codeexploiter]

You can do the following things to avoid the going to the "href" part so that your viewers will only get a single popup window in which they can view the clicked image and I think this is the nature you want.

1. You can convert your current needed hyperlinks to the following manner. Highlighted the changes.

<a onclick="MM_openBrWindow('images/queenofbavaria.jpg','QueenofBavaria','width=160,height=300')" href=[ICODE]"#"

><img height="55" width="110" alt="Hand-fed Queen of Bavaria" src="images/queenofbavariat-n.jpg"/></a>[/CODE]

Make sure that you do this for all the images in the gallery and you can remove the 'target=_blank' attribute from the anchor elements.

2. You can do it like the following:

<a onclick="MM_openBrWindow('images/queenofbavaria.jpg','QueenofBavaria','width=160,height=300')[ICODE];return false;[ICODE]" href="images/queenofbavaria.jpg"><img height="55" width="110" alt="Hand-fed Queen of Bavaria" src="images/queenofbavariat-n.jpg"/></a>

In this case when a user clicks on the image it will execute the JS function meant for 'onclick' event and after that it will not go to the 'href' part like in the normal operations.

But you can avoid this method completely and use the 'onclick' event on the img element so that you can avoid all these confusions. Like the following manner:

<img height="55" width="110" alt="Hand-fed Queen of Bavaria" src="images/queenofbavariat-n.jpg" onclick="MM_openBrWindow('images/queenofbavaria.jpg','QueenofBavaria','width=160,height=300');return false;"/>

A problem I've noticed with your page is the image click event behaves differently for different images, which I think needs to be avoided. You have to follow a particular method

Another problem noticed is the following markup contains incorrect image path name

<a onclick="MM_openBrWindow('africangreybaby.jpg','AfricanGreyBaby','width=183,height=275')" target="_blank" href="images/africangreybaby.jpg"><img height="55" width="110" alt="Hand-fed African Grey" src="images/africangreybabyt-n.jpg"/></a>

It seems that the highlighted item should be 'images/africangreybaby.jpg'

The important part is make sure that all the hyperlinks opens up the image using the JS like the way I've mentioned in the first case or in the second case. Currently it is not like that in your page.

The image name you've mentioned as the first argument of 'MM_openBrWindow' function in some place seems to be missing the image extension.

Hope this helps

[jscheuer1]

I think the reason you have been having problems finding an answer to this one is that it's such a basic issue. On your testing page where you have:

<a href="images/queenofbavaria.jpg" onclick="MM_openBrWindow('images/queenofbavaria.jpg','QueenofBavaria','width=160,height=300')"><img src="images/queenofbavariat-n.jpg" alt="Hand-fed Queen of Bavaria" width="110" height="55" /></a>

You are both opening a new window and linking to the image. What I think you want to do (though I'm not 100% sure) is to only open the new window, keeping the current page loaded in the current window. For that, return false for the onclick event - do:

<a href="images/queenofbavaria.jpg" onclick="MM_openBrWindow('images/queenofbavaria.jpg','QueenofBavaria','width=160,height=300');return false;"><img src="images/queenofbavariat-n.jpg" alt="Hand-fed Queen of Bavaria" width="110" height="55" /></a>

That way (with javascript enabled - most folks) the pop up window (if allowed - again, most folks allow it) will override the link. With javascript disabled, it will link directly to the image, so those few people will at least see the image and can use their back button to return to the nursery page. And most search engines will see it as a link to the image.

However, there are more sophisticated ways of using javascript for this sort of thing - like lightbox for one, which cannot be blocked like a pop up can. But it is much more code and a little bit of a learning curve to use.

[sandyk3]

First - thanks Codex for your post. I did try the first one and it still opened the image in a new window. Yes, I deleted the "images/" from the african grey in haste. Thank you for pointing that one out to me. The reason each image behaves differently is because I had been testing the first five images with different ways of attaching the behavior to the object - the image. Thank you for helping me. I don't understand what "icode" means.

John!! How are you? Yes.. Your code worked - and the only difference was the "return false"!! So I understand this, and this did work, does the return false mean if JS is not enabled that it will open the href? I added the target blank so the image would open in a separate window and if JS is not enabled it works. The JS still works with the blank in there too.

So this time, the answer was so obvious I didn't see it. LOL.. grrrr.. I even looked in my Javascript Bible. I've been trying to do this since yesterday.

Please let me know if I am understanding the return false correctly.

Thank you again!!

Sandy K

[jscheuer1]

The directive to return false is a little complicated only because it doesn't really do any specific thing in and of itself - it just overrides the default action - whatever that might be at the point return false is invoked, and because (depending upon the browser and the default action), it may not be allowed in some cases.

That said, yes - you seem to have a good grasp of what it is doing in this case. The default action of the link is to open the href. Using return false prevents this when javascript is enabled. Adding a target=_blank (though deprecated, but still supported is a nice touch on your part) to the link allows most non-javascript users to still remain on the page while viewing the pop up image in a generic new window. But with no target attribute your page would be more valid, though it would change to the image (requiring, as I said, the non-javascript user to use their back button to return to the page - inconvenient, yet preferred by purists). With javascript enabled, the target is superfluous, but the code MM_openBrWindow . . . opens a new window anyway, and adds specifications to the new window that make it more pleasing I suppose.

I still prefer a script like lightbox (as I mentioned) for things like this because it is even more universally accessible in those cases where neither javascript nor target are supported, and looks great where javascript is supported, and cannot be blocked by a pop up blocker. Be aware that some pop up blockers will block both non-javascript pop ups achieved via the target attribute as well as those achieved with MM_openBrWindow . . . code. But both of these cases are rather rare.