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/
Lightbox in DFM2HML
Forum rules
-
- Posts: 253
- Joined: Sat Jul 24, 2010 9:59 am
Re: Lightbox in DFM2HML
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 Regards,
Roland
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 Regards,
Roland
You do not have the required permissions to view the files attached to this post.