PDA

View Full Version : [jQuery] lightbox on home page question



MrE03
07-19-2011, 06:27 PM
I'm trying to add a lightbox or lightbox clone on the homepage. I seem to have inserted all the correct code and uploaded the files in all possible places to correctly call out the js/css. However the feature is not working for some reason.

So my question basically is..is the code for:


<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

need to be coded differently to call these out?

I tried creating a custom information page and also tried in index information page. The code above I inserted in mainpage.tpl file while the image or video link I inserted in a separate page.

Here is in reference: prettyPhoto documentation | Stéphane Caron (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/)

The lightbox seems pretty straightforward so I must be missing something here, if the code is all on one file (demo.html for instance) then it'll work.

ridexbuilder
07-19-2011, 11:51 PM
It's possible that it is conflicting with the inbuilt Slimbox and jquery may already be called in the file - check.
It may be as simple as calling Slimbox before/after PrettyPhoto.

ridexbuilder
07-20-2011, 02:22 AM
Let me do the effort for you...


This package integrates the great prettyphoto (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/) jquery lightbox clone by Stephane Caron prettyPhoto is a full blown media lightbox supporting images, videos, flash, YouTube, iframes and ajax. It can be used as a drop-in replacement of JQueryPlugin (http://foswiki.org/Extensions/JQueryPlugin)'s version of slimbox, another lightbox clone, shipped with foswiki by default. prettyPhoto has been integrated by means of minimal invasive markup, that is any DIV element with a class jqPrettyPhoto will be converted into a media lightbox automatically without any extra provisions, similar to the way slimbox is used. Additional parameter to the plugin itself can be passed using JQueryMetadata (http://foswiki.org/System/JQueryMetadata). Note that Foswiki:Extensions/TopicInteractionPlugin (http://foswiki.org/Extensions/TopicInteractionPlugin) as well as Foswiki:Extensions/ImageGalleryPlugin (http://foswiki.org/Extensions/ImageGalleryPlugin) will automatically switch from slimbox to prettyPhoto for lightboxing.

If you wanna do fancy things, then you need to do the research. ;)
I originally chose Slimbox2 over other Lightbox clones due to its' use of the now near ubiquitous JQuery and (more importantly) its' small bloat-free footprint. The latter seems so fruitless, compared to many add-ons/contributions.
I personally hate all that Flash/video/social networking malarky on an ecommerce site and find it distracts from the key purpose - to sell products. Hence Slimbox2 being utilised, to enhance product images. KISS philosophy and all that.

MrE03
07-20-2011, 06:07 PM
oh ok, is it possible for me to somehow call out the slimbox feature to make a youtube clip pop up on the home page? Would it be as simple as calling a "rel=" code?