We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 22574
    • 181 Posts
    Currently the image title in the paragraph element will change on mouse over on any icon.

    I would love to have these extras:

    1. show the initial title of the first image at the start with no mouse over.

    2. change the title when clicking the next or previous arrows.

    3. change the title when the slideshow kicks in.

    Any ideas?
      • 22574
      • 181 Posts
      Okay so I think I cracked it.

      I am using the external carousel but this should apply to the other versions.

      First I added an id to the paragraph box for the description - as javascript cant track down a class. This is the label p element.
      So under the first line mentioned below, in your jd.gallery.js file put the second line listed below. Please note that I put my title in the paragraph as the title h1 was used for the gallery name - so just swap it around to your liking.

      this.carouselLabel = new Element('p').addClass('label').injectInside(carouselElement);
      			this.carouselLabel.id = "label";


      Then in the function nextItem: function() put:
      document.getElementById('label').setHTML(this.galleryData[this.nextIter].title);


      Same for the prevItem: function().

      This will update the label title when clicking the arrows and also when the slideshow starts.

      Finally you might want to show the image name when you first load the page, so put the code shown below at the end of the function called constructThumbnails:

      document.getElementById('label').setHTML(this.galleryData[0].title);


      Cheers!