how to show a text inside the images that are rendered inside jquery slider

Question

I am using a web template which have a jquery slider that uses jQuery touchTouch.jquery.js plugin version 1.0 . a live sample of the slider can be accessed from this link web templete . now inside the web template i got the following markup :-

<div class="row">
                <ul class="listgall">
                    <li class="col-lg-4 col-md-4 col-sm-6  col-xs-6 colgal">
                        <figure><a href="img/page3_bigimg1.jpg" class="thumb"><img src="img/page3_img1.jpg" alt=""><span><strong>Project name:<strong><em>Lorem ipsum dolore massa</em><img src="img/searchsmall.png" alt=""></span></a></figure>
                    </li>

this will do 2 things:-

1.it will show the following when i hover over an image :-

<span><strong>Project name:<strong><em>Lorem ipsum dolore massa</em><img src="img/searchsmall.png" alt=""></span>

2.if i click on the page3_img1.jpg image , then the <a href="img/page3_bigimg1.jpg" class="thumb"> image will be shown inside the slider.

Now i have the following questions, on how i can add these features.

1. when the image is rendered inside the slider , how i can show this markup inside the slider image as a fixed text ? :-

   Project name:Lorem ipsum dolore massa

As currently when the image is rendered inside the slider no text or description will be shown even if i hover over it ?

2. second question . now i have 2 web pages that uses the slider feature. and inside one web page i want to hide the next and previous arrows inside the slider while to show these arrows inside the second web page,, so is this possible , or in this case i need to have two versions of the touchTouch.query.js files and load them separately inside each web page ?

-----------------------EDIT-----------------------------

now after many tests and modifications i did the following modification to the loadImage callback function inside the Touchtouch script :-

function loadImage(src, callback){
            var img = $('<img>').on('load', function(){
                callback.call(img);
            });

            img.attr('src', src);



                // get all the captions (should probably be done with variable referring to something about above selector)
                var allcaptions = $("figure span");

                // setTimeout is a hack here, since the ".placeholders" don't exist yet
                setTimeout(function () {
                    $(".placeholder").each(function (i) {

                        // in each .placeholder, copy its caption's mark-up into it (remove the img first)
                        var caption = allcaptions.eq(i).clone();
                       // caption.find("img").remove();
                        $(this).append("<div class='caption'>" + caption.html() + "</div>");
                    });
        }, 500
        );
}

this seems to show the span correctly as follow:-

but i am facing this problem when i deploy the website to my hosting server (where there is internet delay, unlike working locally on my machine), now when i click on an image it will show the slider and a loading image with the caption as follow:-

then when the image is fully rendered the caption will be removed , and only the image will be shown without the caption text. now if i click on next & previous arrows inside the slider where the image will be loaded from the browser cache ,, there will not be any loading time and the caption will be shown correctly. so is there a way to fix this , for example to modify my script to show the caption text only when the image is fully rendered ? so can anyone adivce how i can fix this issue ?

Answer 1

1. Here is a mock-up pulling in touchTouch and some of your files, while also adding some extra JS functionality and CSS to get the caption to show when the image is enlarged in the slider:

   http://jsfiddle.net/dx8qdoph/

   Some notes: I didn't bother with the captions sliding in and out on hover (I just hid them). The setTimeout part of it is a bit of a hack to save me time. I added the setTimeout since the .placeholder elements that touchTouch adds don't yet exist when the thumbnails are clicked. The right way would presumably be to append the captions after a timeout loop or MutationObserver or something like that tells you when they exist (not my forte). Alternatively, if it's an option for you to customize the touchTouch.jquery.js file, you could make the caption-adding JS in there instead.

2. I don't think you should need two versions of touchTouch to hide the arrows in one implementation and not the other. You can see in the fiddle that I just hid the arrows by display:none'ing them in CSS (you can still use arrow keys to go back and forth).

Answer 2

Try utilizing css :after pseudo-element , content property , set attr(X) to data-* attribute set at .placeholder . Note, :before appear to be used at existing css , see touchTouch.css at lines 51-60

#gallerySlider .placeholder:after {
  content: attr(data-placeholder);
  color: yellow;
  font-size: 36px;
  font-family: arial;
  position: relative;
  display: block;
  height: 20px;
  width: 200px;
  z-Index: 1;
  bottom: 42px;
  text-align: right;
  margin: -8px;
}

<div id="gallerySlider" style="left: -400%;">
  <div class="placeholder" data-placeholder="cats">
    <img src="http://lorempixel.com/200/200/cats">
  </div>
  <div class="placeholder" data-placeholder="nature">
    <img src="http://lorempixel.com/200/200/nature">
  </div>
  <div class="placeholder" data-placeholder="animals">
    <img src="http://lorempixel.com/200/200/animals">
  </div>
</div>