CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user701025
user701025

Reputation:

Change Dynamic Link Text In Javascript

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>');
    });

Upvotes: 1

Views: 167

Answers (2)

Sajad Deyargaroo
Sajad Deyargaroo

Reputation: 1149

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>');

Upvotes: 0

johnkavanagh
johnkavanagh

Reputation: 4664

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');

Upvotes: 1

Related Questions