1

I currently have a slideshow run with HTMl CSS and JS at the moment for the navigation buttons below the slideshow it is just placing numbers instead of text. Is there a way to grab the images title and use it or custom text for each slide link. Below i included the Javascript that makes the navigation buttons and adds the text. If you need anything else just let me know.

If i can just specify text in this JS file that would work too.

Also if it may help im using Kickstart HTML Template. Link to view it http://bliskdesigns.com/clients/timbr/

var items = $(this).find('li');
    wrap.append('<ul class="slideshow-buttons"></ul>');
    items.each(function(index){
        wrap.find('.slideshow-buttons')
        .append('<li><a href="#slideshow-'+index+'" rel="'+index+'">'+(index+2)+'</a></li>');
    });
Improve this question
2
  • At the moment there's really not enough code for anyone to get a grasp of what's going on. Your best bet would be to spend a few minutes putting together a working example on JSFiddle. With that, we might be able to better understanding of what you're asking and how your current implementation works. Commented Nov 29, 2013 at 15:00
  • Here is a link to the JS Fiddle But it does not seem to work. jsfiddle.net/3gRJ9 Also here is a link to it working bliskdesigns.com/clients/timbr Commented Nov 29, 2013 at 15:04

2 Answers 2

Reset to default
1

It's difficult to give you a concise answer with what you've provided, however:

Assuming that in the code you've provided:

  • items is an array containing each slide in your slideshow;
  • That each element in items contains an img;
  • That the text that you want to appear in the slideshow nav is the title attribute of each img;
  • That the unordered list being built by wrap is the navigation;
  • That the text you want to change is the numeral within the anchor of each item injected into wrap.

Here's a potential answer:

// put all slides into 'items'
var items = $(this).find('li');

// append the wrap element with an unordered list
wrap.append('<ul class="slideshow-buttons"></ul>');

// loop over each item
items.each(function(index){
    // grab the title attribute of the img child of this instance of items
    var titleText = $(this).find('img').attr('title');  

    // push a new <li> into 'wrap'
    wrap.find('.slideshow-buttons').append('<li><a href="#slideshow-'+index+'" rel="'+index+'">'+titleText+'</a></li>');
});

This should just be a direct replacement for wherever in your project the code you've included above came from.

As I say: I can't promise that this will work without a lot more information, but in theory it will. Make sure that each of your images has a title:

<img src="/link/to/image.kpg" alt="alternative text" title="text you want to appear in the slider navigation" >

Alternatively, you can use the text in the image's alt tag instead by changing this line from above:

// grab the alt attribute of the img child of this instance of items
var titleText = $(this).find('img').attr('alt');
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Worked Perfect Thanks as you can see here bliskdesigns.com/clients/timbr it used the titles perfect.
0

In the list items you can add the text that you want to display instead of numbers, as shown below.

<li data-displayText="Timber Mart"><a href="http://www.timbermart.ca/credit-card">  <img src="http://i.imgur.com/4XKIENA.png" width="920"  />   </a></li>

Then in above code you can use the text instead of index, as shown below.

wrap.find('.slideshow-buttons')
        .append('<li><a href="#slideshow-'+index+'" rel="'+index+'">'+$(items[index]).attr("data-displayText")+'</a></li>');
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.