Image Gallery

Need to scroll images

Page 1 of 1

6 Replies - 2286 Views - Last Post: 23 December 2008 - 04:58 AM

#1 James Bond C++ Spy  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 132
  • Joined: 03-October 07

Image Gallery

Posted 22 December 2008 - 08:10 AM

I am working on a photography website for a friend and I need some help. I have built a page with thumbnails on the left of the page and as you hover over them the picture displays on the right side full size. It is works great but there are too many pictures. I need to make the thumbs on the left side scroll (so I can fit all of them) and display on the right side full size. I have done this via HTML and CSS.

Here is my CSS code:
/*CSS Gallery Code*/

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid gold;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 15px;
left: 450px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>




Here is my HTML code:
<div class="gallerycontainer">
<!-- Gallery Row Horz -->
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child21.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child21.jpg" /><br /></span></a>
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child19.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child19.jpg" /><br /></span></a>
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child18.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child18.jpg" /><br /></span></a> 
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child15.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child15.jpg" /><br /></span></a>
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child25.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child25.jpg" /><br /></span></a>
<br />
<!-- Gallery Row Horz-->
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child2.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child2.jpg" /><br /></span></a>
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child4.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child4.jpg" /><br /></span></a>
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child8.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child8.jpg" /><br /></span></a>
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child11.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child11.jpg" /><br /></span></a>
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child12.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child12.jpg" /><br /></span></a>
</div>



This code works perfect but I need to be able to scroll (not the whole page just the thumbs)(with a scroll box??) the list of thumbnails on the left and have the images show full size on the right as there hovered over. Thanks for any help with this.

Is This A Good Question/Topic? 0
  • +

Replies To: Image Gallery

#2 b.ihde  Icon User is offline

  • D.I.C for life
  • member icon

Reputation: 44
  • View blog
  • Posts: 1,070
  • Joined: 29-September 08

Re: Image Gallery

Posted 22 December 2008 - 09:56 AM

Hi!

Try this:

.gallerycontainer{
position: relative;
overflow: auto;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}



You have to set the height of the div box. overflow: auto means,if the div box is larger than the content, there is no scroll bar, if not, there is one :) You can try also overflow: scroll, if the scroll bar should always be visible.

regards

B.Ihde
Was This Post Helpful? 0
  • +
  • -

#3 James Bond C++ Spy  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 132
  • Joined: 03-October 07

Re: Image Gallery

Posted 22 December 2008 - 11:03 AM

Thanks that got the part of the page to scroll. The problem is the full size image stays at the top so if you scroll down the full image doesn't scroll so you loose part of it. Check out the page:

http://www.shanebowe...alleryTest.html]Children Gallery[/url]

Any ideas???
Thanks for your help
Was This Post Helpful? 0
  • +
  • -

#4 fashionnugget  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 163
  • Joined: 25-November 08

Re: Image Gallery

Posted 22 December 2008 - 01:48 PM

You could always make 2 pages of children photos, just copy the code and change the images.
Was This Post Helpful? 0
  • +
  • -

#5 James Bond C++ Spy  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 132
  • Joined: 03-October 07

Re: Image Gallery

Posted 22 December 2008 - 09:30 PM

How can I just make the thumbs scroll on the left side of the screen and get the full display image to stay in the same spot on the screen to the right? One of the pages I need to do has 130 or so images. Can I do this with frames? Can someone please help. Thanks for any help
Was This Post Helpful? 0
  • +
  • -

#6 b.ihde  Icon User is offline

  • D.I.C for life
  • member icon

Reputation: 44
  • View blog
  • Posts: 1,070
  • Joined: 29-September 08

Re: Image Gallery

Posted 23 December 2008 - 12:15 AM

If you want to have it easier, you can use javascript for creating a image galary like this...
Was This Post Helpful? 0
  • +
  • -

#7 ~NJ  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 8
  • View blog
  • Posts: 52
  • Joined: 22-December 08

Re: Image Gallery

Posted 23 December 2008 - 04:58 AM

Since your setup is displaying both the thumbnails and the main images inside a single div, it's not possible to have the scrollbar only effect the thumbnails when it is the main div that is holding that attribute.

What you can do is assign a fixed position to the spans or the imgs.
Replace:
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}



With:
.thumbnail span{ /*CSS for enlarged image*/
position: fixed;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}



Overall, I highly recommended a different structure for an album as one like this is kind of sloppy. I would like to recommend you look into a Javascript library such as jQuery for performing something like this with easy and I'd like to further recommend you do some quick Google searches for some premade image galleries and possibly learning the structure that they have used.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1