the right/light lightbox

Looking for a suitable script for the popular lightbox presentation to show my web students – I went online to do some research and was quite taken back with the number of different techniques now used.  With jQuery being such a light and apparently designer-friendly script – it was no surprise to find it in use extensively. I came across this great post: 10+ promising jQuery Lightbox-Clones Plugins by insicDesigns. This list shows various different techniques and makes for interesting experimenting :)

If you want to have a play around yourself – please do refer to the original sources for specifics. You will also need the jQuery JavaScript library itself, or link to it. You can download the latest version from the Google code library.

FancyZoom
Initially the FancyZoom by orderedlist looked excellent – a very quick response and simple presentation. The demo works very smoothly and for a limited amount of images – this technique can be suitable. FancyZoom works by referencing IDs between the link and the chosen content within a container with the same ID. This essentially means that all content will have to be put into the HTML itself.
<div class=”photo”>
  <a href=”#beach1″>
    <img src=”images/beach1.jpg” alt=”beach photo” />
  </a>
</div>

The ID referred to in the link is then referenced to the ID assigned to the DIV containing the content to be zoomed.
<div id=”beach1″>
    <img src=”images/beach1.jpg” alt=”beach photo” />
</div>

This can of course add weight to the page, in case of the CSS or JS failing – in which case all images will appear on the page – and add to the amount of code in the HTML document itself. In cases where only very few images are on display – this technique can work well.

FaceBox
Looking for an alternative which would not required the extra DIVs for zoomed content – I found FaceBox. This technique can be used to show images, text or even another HTML file. The use for an image gallery here allows for multiple images as no added HTML is needed. Once the JS function is active – the image get loaded on demand.
 <a href=”beach1.jpg” rel=”facebox”>
    <img src=”images/beach1_thn.jpg” alt=”beach photo” />
 </a>

Much cleaner in its application – these options are very useful indeed :-)

jQuery lightBox
My favourite however still remains based on the original LightBox JS by Lokesh Dhakar. Now faster and just as customisable as the original – the new version is using jQuery, written by Leandro Vieira Pinho.
This lightbox plugin allows you to assign the presentation effect to an ID assigned to the DIV containing the image links. The styling of presentation and visuals is highly flexible and great to work with.
<style type=”text/javascript”>
$(function() {
$('#photos a').lightBox();
});

</style>

09/02/2009 blog,handcoding

8 Responses to “the right/light lightbox”

  1. Gravatar

    17/02/2009

    baiba says:

    This is very usefull..
    THANKS!
    I will try these ones out right now :)

  2. Gravatar

    18/02/2009

    prisca says:

    cheap Maxalt in Los Angeles California Baiba ;)
    thanks for stopping by, nice to hear from you.
    Have fun with these ;)

    binary options niche PS: I like you gravatar, very nice ;)

  3. Gravatar

    cheap premarin 24/02/2009

    Mustafa Hajjar says:

    كيف يمكنني كسب المال من المنزل مجانا Prisca Thanks a lot for teaching us about jQuery
    have a look on this site
    Learning jQuery:
    http://www.learningjquery.com/
    Tips, techniques, and tutorials for the jQuery JavaScript library

    manuale di opzioni binarie Regards

  4. Gravatar

    binär optionen deutschland 04/03/2009

    The Right/Light Lightbox | Design Newz says:

    Buy Tastylia (Tadalafil) Online No Prescription [...] The Right/Light Lightbox [...]

  5. Gravatar

    purchase online Tastylia without rx 09/03/2009

    insic says:

    köpa viagra spanien Thanks for linking my blog.

  6. Gravatar

    handla binära optioner 330 09/03/2009

    prisca says:

    http://markmymusic.com/?u=%D8%A3%D8%B1%D8%A8%D8%AD-%D8%A7%D9%84%D9%85%D8%A7%D9%84-%D8%A8%D8%B3%D8%B1%D8%B9%D8%A9-%D8%A7%D9%84%D9%8A%D9%88%D9%85&07b=0e أربح المال بسرعة اليوم insic – my pleasure :-)
    you do have a lovely site :)

  7. Gravatar

    köpa Viagra online Kramfors 10/03/2009

    Envy says:

    Köp Viagra Jönköping Super-Duper site! I am loving it!! Will come back again – taking you feeds also, Thanks.

  8. Gravatar

    opcje binarne sciema 10/03/2009

    prisca says:

    binaire opties 60 sec Envy, aw… thanks ;) glad you like the site :)

graphiceyedea prisca schmarsow – portfolio

portfolio