Image gallery with horizonal scroll

grimaldi

newbie

Posts: 10
Joined: 2008-01-28

Posted: Thu, 2008-08-28 18:33

Hi guys,

I'm trying to make an image gallery that will just scroll horizontally and not vertically (the vertical bar will not be displayed. I have achieved this by putting a UL inside a div that has a set height and width - then giving the contained UL a width depending on how wide all the images add up too. The massive issue with this is the number of images that will be shown will differ as they will be unlimited so there could be any amount of images displayed (list items). So i really can't use this method as I can never specify a width?

One thing I thought of was having the list items have differning classes (.top & .bottom for example), so I could have one list item (.top) and the next list item would be underneath it (.bottom). Then I would clear and float .top so it went to the side of the first .top list item and so on ...but that didn't work ....and I don't know if it ever would!? shrug

Here is the code I currently have:

<div id="gallery">
<ul>
<li><a href="##"><img src="graphics/test.jpg" /></a><h3>Heading here</h3></li>
<li><a href="##"><img src="graphics/test.jpg" /></a><h3>Heading here</h3></li>
<li><a href="##"><img src="graphics/test.jpg" /></a><h3>Heading here</h3></li>
<li><a href="##"><img src="graphics/test.jpg" /></a><h3>Heading here</h3></li>
<li><a href="##"><img src="graphics/test.jpg" /></a><h3>Heading here</h3></li>
<li><a href="##"><img src="graphics/test.jpg" /></a><h3>Heading here</h3></li>
<li><a href="##"><img src="graphics/test.jpg" /></a><h3>Heading here</h3></li>
<li><a href="##"><img src="graphics/test.jpg" /></a><h3>Heading here</h3></li>			
</ul>
</div>

#gallery ul, #gallery li {
	list-style: none;
	margin: 0;
	padding: 0;
	}
#gallery {
	height: 330px;
	margin-bottom: 1em;
	overflow: auto;
	width: 620px;
	}
#gallery ul {
	overflow: hidden;
        width: 930px;
}
#gallery li {
	background: #e6e6e7;
	display: inline;
	float: left;
	margin: 0 10px 1em 10px;
	padding: 10px 10px 5px 10px;
}
#gallery li:hover {
	background: #d5d5d5;
}
#gallery li img {
	width: 115px;
}
#gallery li h3 {
	font-size: 100%;
	font-weight: normal;
	margin: 0;
	text-transform: uppercase;
}

I hope someone can help me with this, its a real pain. I'll get right back to you with any further information you need! Thanks in advance peeps Smiling

Tony

Moderator

Posts: 2808
Joined: 2003-03-12
Location: Brisbane

To specify a width why not

Posted: Fri, 2008-08-29 02:46

To specify a width why not use the magic of JavaScript.
If each image has the same dimensions then just count the LI's and times that by the width with the margins etc.

  var gal = document.getElementById("gallery");
  var lis = gal.getElementsByTagName("LI").length;
  var w = (lis * 155)+'px';
  gal.getElementsByTagName("UL")[0].style.width=w;

Your question may have already been answered, search and read before you ask.

gary.turner

Moderator

Posts: 5960
Joined: 2004-06-25
Location: Dallas

Another approach is to

Posted: Fri, 2008-08-29 08:03

Another approach is to display your list items as inline-block. All modern browsers support it, and IE can be worked around.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org" />
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <style type="text/css">
/*<![CDATA[*/

  body {
    background-color: silver;  /*to show that body extends*/
    }

  ul {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    }

  li {
    display: inline-block;
    vertical-align: top;
    }

  li a {
    text-decoration: none;
    }

  li img {
    border: none;
    }

  li h3 {
    width: 275px;
    text-align: center;
    }

  /*]]>*/


  </style>
  <!-- IE doesn't support inline-block, but it does set hasLayout.
     Resetting the display to inline lets IE's buggy behavior work
     for you.  CC excludes IE8 as it's supposed to work right. -->
  <!--[if lte ie 7]>
<style type="text/css">
li {
    display: inline;
    }
</style>
<![endif]-->

  <title>test</title>
</head>

<body>
  <ul>
    <li>
      <h3><a href="#"><img src="num0.png"
           alt="0" />
      <br />
      The Number 0</a></h3>
    </li>

    <li>
      <h3><a href="#"><img src="num1.png"
           alt="1" />
      <br />
      The Number 1</a></h3>
    </li>

    <li>
      <h3><a href="#"><img src="num2.png"
           alt="2" />
      <br />
      The Number 2</a></h3>
    </li>

    <li>
      <h3><a href="#"><img src="num3.png"
           alt="3" />
      <br />
      The Number 3</a></h3>
    </li>

    <li>
      <h3><img src="num0.png"
           alt="0" /></h3>
    </li>

    <li><img src="num0.png"
         alt="0" /></li>

    <li><img src="num0.png"
         alt="0" /></li>

    <li><img src="num0.png"
         alt="0" /></li>

    <li><img src="num0.png"
         alt="0" /></li>

    <li><img src="num0.png"
         alt="0" /></li>
  </ul>
</body>
</html>

Attachment	Size
num3.png	74 KB
num2.png	84.55 KB
num1.png	55.08 KB
num0.png	77.42 KB

A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.

My site is slo-o-owly being reconstructed; visit anyway.

grimaldi

newbie

Posts: 10
Joined: 2008-01-28

Thanks a lot guys for your

Posted: Fri, 2008-08-29 08:54

Thanks a lot guys for your replies, that has helped a lot - I have a few questions though...

I need the gallery to be 2 list items high by however many wide - rather than the one row. Is there away to do this with the CSS method?

For the JAVA method, I was thinking could I give every other list item a class and in that JAVA code instead of 'LI' have the class? And how would I do this? The reason I'm thinking of this is to get the 2 list items high effect.

If I add 155px to every list item it will stay on one line. However I'm thinking that if I have classes like:

I can just add 155px on to ".top", no width will be added when the next image is added so it should just fall in below?

I hope that makes sense? And if so, will it work? hehe

Thanks again guys! Smiling

Stomme poes

Leader

Posts: 847
Joined: 2008-02-04
Location: Netherlands

The 155px was an example

Posted: Fri, 2008-08-29 14:12

The 155px was an example width so that the javascript (which btw is very different from JAVA, another programming language) can count pixels and set an appropriate width.

Being images, they actually already have a set width (whether you state it or not, but it's always better to state the width in the HTML so the browser doesn't have to waste time actually looking at the image to see how wide and tall it is).

For two lines, I'm thinking you'd have to float the li's, measure out the total length of the ul, divide by two, and whichever image is in the middle gets a class that says "clear: left" which would make the new line. However then you'll need Javascript for sure, and I don't think you could use Gary's inlne-block method.

In general, if you have two CSS states, instead of putting classes on every single one of them, you'd only put a class on every other one, and leave the rest to have the "default" styles. Less code all around. I notice a lot of programmers are class-happy like that because they are used to always needing to declare something explicitly for everyone. In CSS, you can set defaults for tags themselves, and use classes to distinguish those tags who need to be different.

If you did it like how I'm thinking, your li's would all be floated in a single ul, and in your css, after stating everything you want for the floating li's, you list the class that's supposed to clear:

li {
  width: whatever;
  float: left;
  other stuff;
}
li.newline {
  clear: left;
}

Here, li.newline does everything li does, plus it clears. And you'd use Javascript or something to know which element to set that on, if that's possible. Only one element would get it-- if you set clear on every other one, you'd get a two-column dynamic-length vertical gallery instead of a horizontal gallery.

Another (and mayeb simpler solution) is to just have two ul's, set up with the inline-block method Gary posted. Since you're dynamically adding the images anyway, just tell it to fill each ul with the same number of images (when that's possible). If there are only two images available, each ul gets one image. If there are 40 images in total, each ul gets 20 images. This would give you the look you want.

Yesh, that might be much easier, and if some backend program is adding these images, you'd give an id to each ul and tell the program to do even-odd adding. No Javascript or front-end scripting needed.

I'm no expert, but I can fake one on teh Interwebz

gary.turner

Moderator

Posts: 5960
Joined: 2004-06-25
Location: Dallas

Simply put two items in each

Posted: Fri, 2008-08-29 15:26

Simply put two items in each list-item.

  <ul>
    <li>
      <h3><a href="#"><img src="num0.png"
           alt="0" />
      <br />
      The Number 0</a></h3>

      <h3><a href="#"><img src="num1.png"
           alt="1" />
      <br />
      The Number 1</a></h3>
    </li>

    <li>
      <h3><a href="#"><img src="num2.png"
           alt="2" />
      <br />
      The Number 2</a></h3>

      <h3><a href="#"><img src="num3.png"
           alt="3" />
      <br />
      The Number 3</a></h3>
    </li>

    <li>
      <h3><a href="#"><img src="num2.png"
           alt="2" />
      <br />
      The Number 2</a></h3>

      <h3><a href="#"><img src="num3.png"
           alt="3" />
      <br />
      The Number 3</a></h3>
    </li>

    <li>
      <h3><a href="#"><img src="num2.png"
           alt="2" />
      <br />
      The Number 2</a></h3>

      <h3><a href="#"><img src="num3.png"
           alt="3" />
      <br />
      The Number 3</a></h3>
    </li>

    <li>
      <h3><a href="#"><img src="num2.png"
           alt="2" />
      <br />
      The Number 2</a></h3>

      <h3><a href="#"><img src="num3.png"
           alt="3" />
      <br />
      The Number 3</a></h3>
    </li>
    <li>
      <h3><a href="#"><img src="num0.png"
           alt="0" />
      <br />
      The Number 0</a></h3>
    </li>
  </ul>

cheers,

gary

A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.

My site is slo-o-owly being reconstructed; visit anyway.

Image gallery with horizonal scroll

To specify a width why not

Another approach is to

Thanks a lot guys for your

The 155px was an example

Simply put two items in each

Online users