[Javascript] Alternative ways to "popup" images?

[David Hucklesby]

On 5/14/10 8:52 AM, Philip Thompson wrote:
> 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):
>
[code snipped]

Hi "forwebonly" -

I suspect the reason that you can't find a solution that works with
pop-up windows is that pop-up windows simply don't work in an increasing
number of situations. Even the idea of a "window" is alien to newer
devices like the iPhone. On PCs, all newer browsers have a pop-up
blocker available.

If I were you, I'd investigate some of the recommendations made by
others on this thread.

While I am here, may I ask you to please use meaningful alternative text
for your images?

http://ianpouncey.com/weblog/2010/01/alt-attributes/

FWIW - I must add that your pop-up completely borked my Thunderbird
e-mail browser. Grrrr!

Cordially,
David
--