Lightbox in DFM2HML

Forum rules
Post Reply
giosafat
Posts: 35
Joined: Sat Apr 09, 2011 4:43 pm

Lightbox in DFM2HML

Post by giosafat » Fri Jan 04, 2013 12:24 pm

Hi everybody,
this is my way to use lightbox (in commercial websites, too):

- download lightbox2 from: http://lokeshdhakar.com/projects/lightbox2/

- unzip and copy the folders "css", "images" and "js" in your root directory

- in your root directory create a folder ("pictures") containing the pictures in normal size, e.g. 640x480

- inside your DFM2HTML project, in "page properties", insert this code in position "before </head>":
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

- in your DFM2HML project, insert an "image" object using one of the pictures of the "pictures" folder (see above), disable "auto height" and "auto width", go to "image" tab, set to "adapted" and resize the picture to obtain a thumbnail, then set borders, corners, shadow etc. as you like (or create a style for the pictures)

- select the tab "link" and insert the relative URL of the image (example: "/pictures/image1.jpg")

- go to the tab "various" and click on "special styles"; put this in "additional HTML attribute":
rel="lightbox"

- copy and past the just created thumbnail and, for each, replace the image and correct the link

Publish and see the result, this is what i obtained:
http://www.lartigianadelfungo.it/lavorazione.html

If you want, you can create an "image set" that show the "next" button inside the images as explained here:
http://lokeshdhakar.com/projects/lightbox2/

reuterr
Posts: 253
Joined: Sat Jul 24, 2010 9:59 am

Re: Lightbox in DFM2HML

Post by reuterr » Fri Jan 04, 2013 3:49 pm

Hi Giorgio,
It might be an option for somebody to embed more than one lightbox-show on a single page.
That's also quite easily to achieve with the "directHTML-object" method. Check this out:
http://rrs.fool-house.com/S9/lightbox/PageEN.html
lightboxV3.zip
Regards,
Roland
You do not have the required permissions to view the files attached to this post.

Post Reply

Return to “English Forum”