Log in

View Full Version : A sliding list gallery



dennyjim50
04-15-2008, 11:50 AM
Well me again, I really found what i'm looking for. Do to the loads of pictures I have, This would be great.

http://www.cssplay.co.uk/menu/list_gallery.html

The script part I have no problem I think:o, I place this between head tags.
Its the rest I can not figure out. What part of the HTML do I need.is this it.



<div class="photo">
<img class="default" src="lpics/default.jpg" alt="default image" title="" />
<ul class="topic">
<li><a class="set" href="#nogo">Image Set #1<!--[if gte IE 7]><!--></a><!--<![endif]--><b></b>
<ins><table><tr><td>
<ul>
<li><a href="#nogo"><img class="thumb" src="lpics/portrait2b.jpg" alt="" title="" /><img class="full" src="lpics/portrait2.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/portrait3b.jpg" alt="" title="" /><img class="full" src="lpics/portrait3.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/portrait4b.jpg" alt="" title="" /><img class="full" src="lpics/portrait4.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/portrait5b.jpg" alt="" title="" /><img class="full" src="lpics/portrait5.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/portrait6b.jpg" alt="" title="" /><img class="full" src="lpics/portrait6.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/portrait7b.jpg" alt="" title="" /><img class="full" src="lpics/portrait7.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/portrait8b.jpg" alt="" title="" /><img class="full" src="lpics/portrait8.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/portrait9b.jpg" alt="" title="" /><img class="full" src="lpics/portrait9.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/portrait10b.jpg" alt="" title="" /><img class="full" src="lpics/portrait10.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/portrait11b.jpg" alt="" title="" /><img class="full" src="lpics/portrait11.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/portrait12b.jpg" alt="" title="" /><img class="full" src="lpics/portrait12.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/portrait13b.jpg" alt="" title="" /><img class="full" src="lpics/portrait13.jpg" alt="" title="" /></a></li>
</ul>

and if so when I get this part of the html and place it on my page I get a container to my right with no picture in it. and some text to the right of the container Image set #1 to the left of the box.

I tried inserting an image of my own here the container changed to my image.

<img class="default" src="lpics/default.jpg" alt="default image" title="" />

I'm starting to sound blond again :p Please can any one help.

Thanks Denise

Medyman
04-15-2008, 01:00 PM
1. When posting HTML (or any code) please use the [HTML][/ HTML] or
[/ CODE] tags. It makes it 20x easier to read.

2. At first glance, your HTML looks fine. Did you also add the CSS onto your page?

Edit: At second glance, your HTML isn't fine. There are some portions missing. Below is the markup from Stu's site (I removed some images for sake of space). The blow will render ONE SET.

[CODE]<div class="photo">

<img class="default" src="lpics/default.jpg" alt="default image" title="" />
<ul class="topic">
<li><a class="set" href="#nogo">Image Set #1<!--[if gte IE 7]><!--></a><!--<![endif]--><b></b>
<ins><table><tr><td>
<ul>
<li><a href="#nogo"><img class="thumb" src="lpics/portrait2b.jpg" alt="" title="" /><img class="full" src="lpics/portrait2.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/portrait3b.jpg" alt="" title="" /><img class="full" src="lpics/portrait3.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/portrait4b.jpg" alt="" title="" /><img class="full" src="lpics/portrait4.jpg" alt="" title="" /></a></li>
<li><a href="#nogo"><img class="thumb" src="lpics/portrait5b.jpg" alt="" title="" /><img class="full" src="lpics/portrait5.jpg" alt="" title="" /></a></li>
</ul>

</td></tr></table></ins><!--[if lte IE 6]></a><![endif]-->
</li>
<!-- INSERT SECOND SET HERE -->
</ul>

</div>

The highlighted part is what you need for each set. If you want a second set, then copy and paste that bit where I have <!-- INSERT SECOND SET HERE --> written.

Make sure that you also copy the CSS from the instructions.

dennyjim50
04-15-2008, 02:20 PM
Thank You medyman for trying to help me
But I still have a problem I'm using netobjects fusion and it just doesn’t seem to work for me.

Could you recommend another viewer for me that might be easier to implement with in NOF

I already am using lytebox on part of the site but that is because I don't have too many pictures in that part of my site to display.

I need another script for the next 200 black and white images I have.

Thanks Denise

Medyman
04-15-2008, 02:39 PM
Ahh, yet another "web development" tool that makes things harder.

I've never even heard of NOF. So, I can't really say what will/won't work with it. Can you explain what limitations they place on you?

All you will need to do is insert some code (CSS or link to external CSS) in the <head> section and the HTML in the <body>, of course.

I assume you're able to do the HTML part. So, the question is, can you insert your own stylesheets? If so, this should work.

If you have a link to your page, that might be a huge help here.

dennyjim50
04-15-2008, 03:04 PM
One again thanks for the prompt reply.

I can not show it to you because it is just a local publish at the moment.

yes I can insert css in the head that is all fine, yes I can add HTML that to is ok.

I have lytebox working fine in another part of the site.

When I view it in my browser I see the container to the right where the big picture should show, I also see the box where my image set's would be but it is just text not buttons as such and drop down affect.

my thumbnails appear as a table under the button and even if I pass my mouse over the thumbnails it does not appear in the container.

I feel like I might be confusing you even more.

Thanks Denise

wpatters1229
07-24-2008, 10:06 PM
I just found a website that has instructions for using lytebox in NOF with templates and all. Go to: http://www.digital-panda.com/lytebox/english/

Have not tried it yet but it looks good.