Results 1 to 2 of 2

Thread: Replace gallery bullets with image

  1. #1
    Join Date
    Jul 2016
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 07-26-2016 at 04:25 PM. Reason: English Usage
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Adding image-bullets to Glossy Accordion Menu
    By Stepper in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 02-06-2011, 03:32 PM
  2. How to replace an image with a new one?
    By Sylver Cheetah 53 in forum CSS
    Replies: 4
    Last Post: 07-09-2010, 02:07 AM
  3. Replies: 0
    Last Post: 08-04-2009, 05:42 PM
  4. DWMR:WHEN I press FIND&REPLACE eg xxxzzz.com with zzz.com and choose ALL SITE REPLACE
    By leonidassavvides in forum Computer hardware and software
    Replies: 0
    Last Post: 04-16-2009, 06:32 PM
  5. Replies: 2
    Last Post: 04-13-2007, 06:30 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •