View Full Version : space between images when using lightbox

09-02-2010, 07:58 PM
1) Script Title: Lightbox Image Viewer 2.03a

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

3) Describe problem: I want to increase the space between my images. They show up in a grid view coming after each other; and they seem to have 2 or 3px between each other. How can I make it larger?

Thanks in advance!

09-02-2010, 08:12 PM
I dont know your code but add this to the image container or to the image if there isnt a container around each image

margin: more px;

you could also try padding or   the nbsp is a blank text space and not a good way to do it.

09-02-2010, 08:40 PM
Thanks for the quick response!
The code is like this:

<link rel="stylesheet" href="../custom/lightbox/css/lightbox.css" type="text/css" media="screen" />

<script src="../custom/lightbox/js/prototype.js" type="text/javascript"></script>
<script src="../custom/lightbox/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="../custom/lightbox/js/lightbox.js" type="text/javascript"></script>

<style type="text/css">
body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif; }

<a href="../images/posters/01.jpg" rel="lightbox" title="inspired by 'The Poetics of Space' by Gaston Bachelard"><img src="../images/posters/01_.jpg" width="177" height="250" alt="" /></a>

<a href="../images/posters/02.jpg" rel="lightbox" title="'rhythm', inspired by 'Rhythmanalysis: Space, Time and Everyday Life' by Henri Lefebvre"><img src="../images/posters/02_.jpg" width="177" height="250" alt="" /></a>

<a href="../images/posters/03.jpg" rel="lightbox" title="odakule building, beyoglu, istanbul"><img src="../images/posters/03_.jpg" width="177" height="250" alt="" /></a>

<a href="../images/posters/04.jpg" rel="lightbox" title="constructionXdestruction; there is still hope for Baghdad"><img src="../images/posters/04_.jpg" width="250" height="250" alt="" /></a>

<a href="../images/posters/05.jpg" rel="lightbox" title="play here: to create your own"><img src="../images/posters/05_.jpg" width="177" height="250" alt="" /></a>

<a href="../images/posters/06.jpg" rel="lightbox" title="the lost marble"><img src="../images/posters/06_.jpg" width="177" height="250" alt="" /></a>

<a href="../images/posters/07.jpg" rel="lightbox" title="poster work for a project about 'playing spaces'"><img src="../images/posters/07_.jpg" width="177" height="250" alt="" /></a>

<a href="../images/posters/08.jpg" rel="lightbox" title="about UNStudio and their understanding of architecture"><img src="../images/posters/08_.jpg" width="177" height="250" alt="" /></a>

<a href="../images/posters/09.jpg" rel="lightbox" title="the loss of architectural identity and degeneration"><img src="../images/posters/09_.jpg" width="353" height="250" alt="" /></a>

<a href="../images/posters/10.jpg" rel="lightbox" title="inspired by Mauro Baracco's article 'Completed yet Unconcluded' in 'AD: Poetics in Architecture'"><img src="../images/posters/10_.jpg" width="577" height="250" alt="" /></a>

<a href="../images/posters/11.jpg" rel="lightbox" title="inspired by Daniel Garcia Andujar's project 'Postcapital'"><img src="../images/posters/11_.jpg" width="500" height="250" alt="" /></a>

<a href="../images/posters/12.jpg" rel="lightbox" title="daily rhythm of a person[first image] the rhythm of taksim square, depending on the activities done by people[second image]"><img src="../images/posters/12_.jpg" width="856" height="250" alt="" /></a>

when I try to add margin:5px between each image input, it doesn't seem to work. Well it works, but adds like 80px. I don't understand why.
Plus, how can I increase the horizontal spaces in the grid?
your suggestion seems to add only vertical spaces after each image.

thank you!