how to create JQuery picture viewer with next and back buttons

Question

Am Looking for help to solve this problem i would like to create a simple image viewer with the following specifications.

MySQL Fetch Images
User Click One Image to view (picture-viewer popup, selected image shown)
User be able to see NEXT image by clicking NEXT
User be able to see PREV image by clicking PREV
On ESC picture-viewer closed

Since am not good in JavaScript Nor JQuery so i just applied the basic to produce the following code which is not able to meet minimum expectations. Instead of showing the user selected image is showing the first image from the unordered list and is not working on IE unless i apply auto start the function i don't need. NEXT/PREV picture has to be shown only if user click next/prev.

<script language="javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
$('.ppt li:first').addClass('first');
var cur = $('.ppt li:first');
var interval;

$('#fwd').click( function() {
    goFwd();
    showPause();
} );

$('#back').click( function() {
    goBack();
    showPause();
} );

function goFwd() {
    stop();
    forward();
    start();
}

function goBack() {
    stop();
    back();
    start();
}

function back() {
    cur.fadeOut( 1000 );
    if ( cur.attr('class') == 'first' )
        cur = $('.ppt li:last');
    else
        cur = cur.prev();
    cur.fadeIn( 1000 );
}

function forward() {
    cur.fadeOut( 1000 );
    if ( cur.attr('class') == 'last' )
        cur = $('.ppt li:first');
    else
        cur = cur.next();
    cur.fadeIn( 1000 );
}



// close em_picture on esc press
window.document.onkeydown = function (e)
{
    if (!e){
        e = event;
    }
    if (e.keyCode == 27){
        em_picture_close();
    }
}

function em_picture_close(){
document.getElementById('b1').style.overflow='auto';    
$("#em_picture").hide();
    $("#em_viewer").hide();
    $(".images_tab").show();
    $("#chart").show();

}
    </script>

HTML

<div id="images_container">
<div id="em_picture" style="display:none;">
<div id="loadimage">
<ul class="ppt">
<li><img src="moments/1372072563PH.png" class="imgview" border="0" id="56"></li>
<li><img src="moments/1372084261art.jpg" class="imgview" border="0" id="3"></li>
<li><img src="moments/1372084531Hot.jpg" class="imgview" border="0" id="6"></li>
<li><img src="moments/137207211166.jpg" class="imgview" border="0" id="40"></li>
</ul>
<span class="prev" id="back" style="display:none" title="prev image"></span> 
<span class="next" id="fwd" style="display:none" title="next image"></span>
</div>
</div>
</div> 
<!-- table where the first image can be selected to be previewed -->
<table cellpadding="0" cellspacing="0" border="0" class="imagestable">
<tr>
<td id="" class="album_image">
<span class="moments_details" style="display:none;">share . hide . delete</span>
<img src="moments/1372072563PH02053J.JPG" class="my_em_moments" border="0" id="showme">
</td>
</table>

to those who can figure out this in other ways please do so, already made working code is accepted

Thanks and regards

score 0 · Answer 1 · answered Jun 26 '13 at 09:44

0

As you want to create something like picture gallery, jQuery fancybox will be the best option for it. The simple and same as your requirements. please see here.

answered Jun 26 '13 at 09:44

Aisha

358
1
3
12

i did get anything from them since there is no explanation – codefun Jun 26 '13 at 09:56
download it from here http://fancyapps.com/fancybox/#license and you'll find the demo example as well. don't forget to mark answered if you find solution. – Aisha Jun 26 '13 at 09:59
i will come back to you soon i got the file – codefun Jun 26 '13 at 10:02
Thanks for the Effort but i cant make it and its so complicated as i already say am not good in java-script as well as the fancyapp License is not allowing me to use it unless i pay. but i appreciated. all i need is something very simple user click image, image shown user click next, next image shown the same way picture viewers does E.g Windows Photo Viewer, no need of auto play or any effects – codefun Jun 26 '13 at 10:30
sent you the easiest running example of fancy box. it's jus one line code in jQuery. hope it'll help you, get back to me if you need any other help. – Aisha Jun 26 '13 at 10:42

score 0 · Accepted Answer · answered Jun 26 '13 at 10:41

ok for your ease, I'm eleborating it step by step:

download the files from the link.
place the lib and source folder in another folder.
place your file in which you're coding in the same folder.
place all images in same folder or whereever you want to place them

and write the code as

<!DOCTYPE html>
<html>
<head>
<title>Picture Gallery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>
    <script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
    <link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
    <link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
    <script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
    <link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
    <script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
    <script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function() 
{
        $('.fancybox').fancybox();  });
</script>   
<style>
    .fancybox-custom .fancybox-skin 
    {
        box-shadow: 0 0 50px #222;
    }

    body 
    {
        max-width: 700px;
        margin: 0 auto;
    }
</style>

</head>
<body>
    <h3>Gallery Style 1</h3>
    <p>
        <a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="1_s.jpg" alt="" /></a>

        <a class="fancybox" href="2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="2_s.jpg" alt="" /></a>

        <a class="fancybox" href="3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="3_s.jpg" alt="" /></a>

        <a class="fancybox" href="4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="4_s.jpg" alt="" /></a>
    </p>

</body>
</html>

Sounds greet now I think it’s a matter of just having enough time to play with it so it fits my UI and on click next/prev also to fetch details/stories concerning the picture. Last thing I wish also to remove the sliding effects a fade-in and fade-out or no effect will suit my needs. But I can appreciate too if you can help remove the effects so we can apply fade-in and fade-out or even no Effect the Image should not goes to the left when exchanging with another but it should just fade. In other ways I can say it works — codefun, Jun 26 '13 at 11:21

score 0 · Answer 3 · answered Jun 26 '13 at 11:42

ok try this code :

<!DOCTYPE html>
<html>
<head>
<title>Picture Gallery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>
    <script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
    <link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
    <link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
    <script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
    <link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
    <script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
    <script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function() 
{
        $('.fancybox-buttons').fancybox({
                openEffect  : 'none',
                closeEffect : 'none',

                prevEffect : 'none',
                nextEffect : 'none',

                closeBtn  : false,

                helpers : {
                    title : {
                        type : 'inside'
                    },
                    buttons : {}
                },
                afterLoad : function() {
                    this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
                }
            }); });
</script>   
<style>
    .fancybox-custom .fancybox-skin 
    {
        box-shadow: 0 0 50px #222;
    }

    body 
    {
        max-width: 700px;
        margin: 0 auto;
    }
</style>

</head>
<body>
    <h3>Gallery Style 1</h3>
    <p>
        <a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>

        <a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>

        <a class="fancybox-buttons" data-fancybox-group="button" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>

        <a class="fancybox-buttons" data-fancybox-group="button" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>
    </p>

</body>
</html>

thanks for considering replying, the first code you give me works better than i thought after i play around with it. — codefun, Jun 26 '13 at 22:13

score 0 · Answer 4 · answered Jul 08 '14 at 12:28

<script type="text/javascript">
                $(document).ready(function(e) {
                    $(".mqimg").mouseover(function()
                    {
                        $("#imgprev").animate({height: "250px",width: "70%",left: "15%"},100).html("<img src='"+$(this).attr('src')+"' width='100%' height='100%' />"); 
                    })
                    $(".mqimg").mouseout(function()
                    {
                        $("#imgprev").animate({height: "0px",width: "0%",left: "50%"},100);
                    })
                });
                </script>
                <style>
                .mqimg{ cursor:pointer;}
                </style>
                <div style="position:relative; width:100%; height:1px; text-align:center;">
                <div id="imgprev" style="position:absolute; display:block; box-shadow:2px 5px 10px #333; width:70%; height:0px; background:#999; left:15%; bottom:15px; "></div>
                </div>

how to create JQuery picture viewer with next and back buttons

4 Answers4