[Javascript] Alternative ways to "popup" images?

[Philip Thompson]

On May 14, 2010, at 7: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.


If you are really interested in learning some more javascript techniques, I strongly recommend reading about and downloading a javascript library - perhaps Mootools (my preference), jQuery or Prototype. There's lots of documentation on each of those - it should help in figuring how to do certain things.

With a library, you could change images with javascript doing the following (for example):

<!-- Format the links something like this -->
<a href="400/2/DSC_7398.jpg"><img src="400/2/DSC_7398.jpg" alt="400/2-760/2" title="" id="DSC_7398" /></a>

<script>
// The 'domready' event fires when the DOM is loaded (basically when the page has loaded)
window.addEvent('domready', function () {
    // Let's add a click even to each img on the page
    $$('img').addEvent('click', function (e) {
        // Stop the 'a' from clicking
        e.stop();
        // Get the data from the alt tag
        var data = this.get('alt').split('-');
        // Call enlarge
        enlarge (this.get('id'), data[0], data[1]);
    });
});
</script>

There is so much more you could do, but this is a way to "change that with javascript." This syntax is using Mootools. Something similar with just using straight javascript would be something like....

<script>
window.onLoad = function () {
    var imgs = document.getElementsByTagName('img');
    var length = imgs.length;
    
    for (var i=0; i<length; i++) {
        imgs[i].onClick = function () {
            var data = imgs[i].alt.split('-');
            enlarge (imgs[i].id, data[0], data[1]);
        }
    }
};
</script>

Hope this helps.

~Philip