[Javascript] Alternative ways to "popup" images?

[Terry Riegel]

If you do a search on this list for a subject called "code optimization" you will find an excellent discussion of exactly what Paul is talking about.

Paul's advise then and now was very instrumental in the way I came to work with and understand good javascript programming.

If I had to wrap it in a nut shell it would be this.

1. Code HTML first, get it working the way you would like it to. You wont get all the features you may want and it may not work exactly the way you want but you can do this with just HTML. In your case your links would look like this...

<a href="400/2/DSC_7398.jpg" target="new"><img src="400/2/DSC_7398thumb.jpg" alt="DSC_7398.jpg" border="no"></a>

They do most of what you intend to do now. They display the image (or thumb) with a link to a new window (notice the target="new")

2. Next enhance the experience with Javascript. Add something like this to the head of your page...

<script>
 window.onload = jsinit;
 function jsinit(){
  // don't run this code if not DOM-aware
  if (!document.getElementById) return;
  // get array of all anchors
  var aItems = document.getElementsByTagName("A");
  // bail if not found
  if (!aItems) return;
  // for each item in the list of anchors
  for (iItem = 0; iItem < aItems.length; iItem++)
  {aItems.onclick=openwindow;}
 }
 function openwindow()
 {alert('opening a window');}
</script>


This is simply a shell or an outline of good javascript coding practices. I highly recommend that you take and follow this advise. It will make you a better programmer and it will also help you pick up good javascript tips/help and to spot the bad stuff/advise that you might encounter.


On May 14, 2010, at 8:26 AM, forwebonly at web.de wrote:

> -----Ursprüngliche Nachricht-----
> Von: Paul Novitski <paul at juniperwebcraft.com>
>> I think your perception of what is happening might be incorrect. I 
>> think the child window is not being closed and re-opened, it's being 
>> resized -- twice, first to 100x100 and then, after the new image 
>> loads, to the size of the new image + 200px.
> 
> This is, how i understood the code.
> But if you look at the webpage itself, it is clear, that this is not what realy happens!
> 
> The images loads, the window gets resize and THEN, a *larger* window frame pops up for the fragment of a second.
> 
> This is the things that annoys me ....
> 
> 
>> Check out Lightbox 
>> <http://www.huddletogether.com/projects/lightbox2/> to see examples 
>> of how the aspect ratio of the pop-up can be animated for a smoother 
>> ride. In the case of Lightbox, the animation is handled using the 
>> jQuery library.
> 
> Thanx, i will have a look at that!
> 
> 
>> Aside, your page is broken when JavaScript is turned off. I strongly 
>> recommend that you begin by marking up the page with real hyperlinks 
>> that link each image to its larger counterpart. Then use JavaScript 
>> to change the links so that they trigger the pop-ups. That way the 
>> content is accessible to every user agent -- including search 
>> engines, mobile devices, firewalled corporate users, and others that 
>> don't execute JavaScript -- but the page is still nicer viewed with 
>> scripting enabled. That is the "win-win" way of web development we 
>> call progressive enhancement.
> 
> Could you provide a short example of this?
> I can only "modify" such code, not realy create it, sadly ...
> 
> What would be needed in those lines:
> 
> <td>9:<a href="javascript:;" onclick="enlarge(8,'400/2','760/2')"><img src="400/2/DSC_7398.jpg" alt="DSC_7398.jpg" border="no"></a></td>
> 
> Just using a HREF to the larger image?
> 
> <td>9:<a href="760/2/DSC_7398.jpg"><img src="400/2/DSC_7398.jpg" alt="DSC_7398.jpg" border="no"></a></td>
> 
> But then, how to change that with JavaScript?
> 
> Any hint would be appreciated :)
> 
> 
>> Also, using a pop-up browser window to display the large image can be 
>> problematic, and I suggest you look at the way Lightbox accomplishes 
>> this by displaying the large image in a div *on the same page* and 
>> then styling it to overlay everything else through absolute positioning.
> 
> I especially like the popup-window - it also works fine with a second monitor, which i constantly use.
> ___________________________________________________________
> GRATIS: Movie-Flat mit über 300 Top-Videos. Für WEB.DE Nutzer
> dauerhaft kostenlos! Jetzt freischalten unter http://movieflat.web.de
> _______________________________________________
> Javascript mailing list
> Javascript at lists.evolt.org
> http://lists.evolt.org/mailman/listinfo/javascript