Replace gallery bullets with image

1) Script Title: Touch Image Gallry

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uchgallery.htm

3) Describe problem: I wanna replace the bullets that's used to show what image you'r visiting with and image, I'v tried to look at the list style in the css but it's set to none and to switch it to "list-style-image: url(‘../images/ul.png’);" as usual don't make any difference

OK, the script actually creates markup, so there are no li's there as bullets, the created markup looks like so:

Code:

---

<div class="jumptodiv">
<span data-image="0" style="cursor: pointer" class="">●</span>
<span data-image="1" style="cursor: pointer">●</span>
<span data-image="2" style="cursor: pointer" class="selected">●</span>
<span data-image="3" style="cursor: pointer">●</span>
<span data-image="4" style="cursor: pointer">●</span>
</div>

---

On the demo page in fact, the size of the "bullets" is made larger for the second demo via this style in the head of the page:

Code:

---

        <style>
        #touchgallery2 .jumptodiv{
        font-size: 3em;
        }
       
        </style>

---

So, you would be able substitute images via style, just not like you were trying there. I'd go with something like so:

Code:

---

<style type="text/css">
#touchgallery2 .jumptodiv span {
        text-indent: -1000px; /* will get the bullets, which are text out of view */
        overflow: hidden; /* make sure text stays out of view */
        display: inline-block; /* make capable of having all four dimensions, while still appear on one line */
        width: 50px; /* these should be the dimensions of your thumbnail images */
        height: 50px;
        border: 2px solid black; /* optional border */
}
#touchgallery2 .jumptodiv span.selected {
        border-color: red; /* optional selected state for border */
}
#touchgallery2 .jumptodiv span[data-image='0'] {
        background-image: url('whatever.jpg'); /* image to replace first 'bullet' */
}
#touchgallery2 .jumptodiv span[data-image='1'] {
        background-image: url('someother.jpg'); /* image to replace second 'bullet' */
}
</style>

---

and on and on for however many bullets there are, giving each a unique background image if you like. Also if you like, since the script gives the active image the selected class, you could have perhaps a different border for that or something as I've included above, that part is optional. You could even have a different image for each individual span when it is the selected one. I would advise against that though, as the alternate images would need to be preloaded. Or the unselected ones could be slightly lower opacity, the selected one full opacity. There are a lot of possibilities.

NOTES: If there's only one gallery on the page, you can dispense with the id in the selectors above. If used, it must match the id of the gallery you are working with. If you simply want the same image for all bullets, that can be given in the first style block, the one covering all the spans, and the individual span blocks could be skipped.

Any questions, feel free to ask.