How to show a text and an icon inside the images that are being rendered inside jquery slider

How to show a text and an icon inside the images that are being rendered inside jquery slider

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 .now inside the web template i got the following markup :-

  1. <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 text and icon when i hover over an image:-

  1. <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 for example , then the
  1. <a href="img/page3_bigimg1.jpg" class="thumb">

image will be shown inside the jQuery slider.


Now i have the following question, on how i can add this feature.

1) when the image is rendered inside the slider , how i can show this markup inside the slider image as a fixed text (this markup is the same as the one used when i hover over the image which is rendered inside the view (not inside the slider)) ? :-

  1. <span><strong>Project name:<strong><em>Lorem ipsum dolore massa</em><img src="img/searchsmall.png" alt=""></span>
As currently when the image is rendered inside the slider no text or description will be shown even if i hover over it. ?