如何使用next和back按钮创建JQuery图片查看器

时间：2013-06-26 09:25:03

标签： javascript jquery image-viewer

Am寻求帮助来解决这个问题我想创建一个具有以下规格的简单图像查看器。

  • MySQL获取图片
  • 用户单击一个图像查看（图片查看器弹出窗口，所选图像 示出）
  • 用户可以通过单击“下一步”
    • 查看“下一张图像”
  • 用户可以通过单击PREV
    • 查看PREV图像
  • 关闭ESC图片查看器

由于我在JavaScript Nor JQuery中表现不佳所以我只是应用了基础来生成以下代码，这些代码无法满足最低期望值。而不是显示用户选择的图像显示无序列表中的第一个图像，并且不在IE上工作，除非我应用自动启动我不需要的功能。仅当用户单击下一个/上一个时，才必须显示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>
对于那些可以通过其他方式解决这个问题的人，请这样做，已经接受了工作代码

谢谢和问候

4 个答案:

答案 0 :(得分：0)

由于你想创建像图片库这样的东西，jQuery fancybox将是最好的选择。简单和您的要求相同。请参阅here。

答案 1 :(得分：0)

好的，为了你的轻松，我正在逐步阐述它：

  1. 从链接下载文件。
  2. 将lib和source文件夹放在另一个文件夹中。
  3. 将您正在编码的文件放在同一个文件夹中。
  4. 将所有图像放在同一文件夹中或放置在您想放置的位置

    5. 并将代码编写为

    <!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>

答案 2 :(得分：0)

好的尝试这段代码：

<!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>

答案 3 :(得分：0)

<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>
相关问题
最新问题