Search code examples
javascriptjqueryhtmlcsstouch

How to add a jQuery "Close" box to my "jQuery touchTouch" plugin's image slider

I am working on a web template which uses the following jQuery plugin to show an image slider:-

> @name     jQuery touchTouch plugin  * 
> @author       Martin Angelov  *
> @version  1.0  *
> @url          http://tutorialzine.com/2012/04/mobile-touch-gallery/  *
> @license      MIT License

Live Demo of the web template can be found on this link :-

http://livedemo00.template-help.com/wt_47767/index-2.html

Now I am facing a problem is that when i show an image slider, there is only the left & right arrows but i can not find any Close box to hide the slider. For example if i click on an image inside the above link , i will get the following:-

enter image description here

But can anyone adivce if there is a way to show a close box , which will close the image slider ? of course if i click on any place outside the slider , then the image slider will be closed, but having an explicit close box will make it easier for users to know how they can close the slider ..

Thanks

Solution

  • Use jQuery/CSS :after selectors respectively to insert a close button. Tried it on your page and it worked.

    // CSS

    .placeholder:after {
    display: block;
    content:'X';
    position: absolute;
    z-index: 9999999999999;
    font-size: 72px;
    left:  50%; /* adjust as neede */
    top: 50%; /* adjust as needed */
    color: red;
    cursor: pointer;
}

    // jQuery

    $('.placeholder').after().click(function () {

 $(this).hide();

});

    Note: You can use my example code but you'd have to adjust the css to get the close button positioned how you want it.