how to display a text inside an image that is rendered inside a jQuery image slider

Question

I am building a web site using asp.net mvc web application + JQuery + Bootstrap 3.

now i am using a web template which provides an image gallery , and when i click on an image inside the image gallery, an image slider will be shown. now the markup for a single image inside the image gallery is :-

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

now as shown on the above markup, inside the image gallery an image named gallery_image1.jpg will be shown when the page loads, and when i hover over it a text will be shown

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

Now if i click on the above image, another image named slide_image1.jpg will be shown inside an image slider.

The problem i am facing is that the image inside the slider will not have any text when i hover over it ,, unlike the image inside the image gallery. so can anyone adivce how i can show a fixed text inside the image when rendered inside a slider ?

here is a sample of the web template image slider i am working on http://livedemo00.template-help.com/wt_47767/index-2.html

Answer 1

Find the jQuery's touchTouch plugin code in js/touchTouch.jquery.js .
It's well commented and you should be able to easily modify the overlay gallery view in order to add the desired stuff in it for every slide.
So there's no Bootstrap magic here. Style everything you need in CSS. Reuse some styles you already have if needed.