How do I create this web effect (With Minimal Coding)?
I realize this is a specialized question, so my apologies. Okay with that out of the way, I’ve seen this effect for the past year or two and it’s becoming more common. You have a picture that expands/blows up on the screen, usually with a drop shadow and a convenient close button. Here’s but one of many examples:
http://www.apple.com/macbookpro/features.html
If you look down to the right of the first paragraph you see their gallery. When you click on the picture, said icon blows up. Now, here’s the rub: I haven’t coded in years, was never good at JavaScript, and am out of the loop. Can Dreamweaver CS4 do it? Or is there some sort of repository floating about? Thanks all!
P.S. Cross-browser compatibility also has to be figured in.
Observing members:
0
Composing members:
0
7 Answers
I would use LightBox v2 for this.
It is pretty easy to get working. No javascript knowledge needed. It uses javascript but you don’t need to write any.
As per the above answer, there are quite a few javascript libraries to achieve an effect like this. (Lightbox, Greybox, etc). You can load non-image content in the overlayed ‘window’ as well.
Most of them require minimal coding: usually you just upload the script and related files to your server, reference the script in the header of your page (or template/theme in the case of a CMS), then add a specific CSS class to the images you want to ‘trigger’ the pop-up enlargement.
The one you referenced as an example on the apple page looks a lot like one called “fancyzoom”: http://www.cabel.name/2008/02/fancyzoom-10.html
Fancyzoom caused a bit of a stir when first released because it has the effect of the image “zooming” from the thumbnail size to the full size.
Good luck with whatever you end up trying!
(edit: looks like irondavy beat me to the punch!)
FancyZoom is closest to what you’re looking for.
Apple obviously don’t use FancyZoom, but it’s essentially an identical effect.
Licensing is reasonable: pay if you’re making money, free otherwise.
Lightbox is good if you’re looking for something completely unrestricted.
Thanks so much, everyone – I’ll try these when I get home from work.
On a property management software site I co-developed, we use a program called Thickbox. If you want to see it in action, click the link, then click product screenshots. It’ll blow up the pictures how your talking about and it’s very customizable and easy to install. Just google thickbox if you want to find it, first link.
Thickbox is probably the best solution. All the javascript libraries are fairly straight forward to implement but look at their file sizes as you don’t want a massive script library being called for one simple effect.
Thickbox is an add-on for the excellent jQuery library and is only about 10kb in size (compressed version) at to this the 15kb for jQuery and you’re looking at 25kb which is about the size of a small-med size image.
Answer this question 
This question is in the General Section. Responses must be helpful and on-topic.
Composing members:
0
