javascript - 如何使用下一步和后退按钮创建 JQuery 图片查看器

Question

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

MySQL 获取图像
用户单击一个图像查看（图片查看器弹出窗口，显示所选图像）
用户可以通过单击 NEXT 来查看 NEXT 图像
用户可以通过单击 PREV 查看 PREV 图像
在 ESC 图片查看器关闭

由于我不擅长 JavaScript 和 JQuery，所以我只是应用了基础来生成以下无法满足最低期望的代码。不是显示用户选择的图像，而是显示无序列表中的第一张图像，并且在 IE 上不起作用，除非我应用自动启动我不需要的功能。仅当用户单击下一个/上一个时，才必须显示下一个/上一个图片。

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

对于那些可以通过其他方式弄清楚这一点的人，请这样做，已经制作的工作代码被接受

谢谢并恭祝安康

score 0 · Accepted Answer

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

score 0 · Accepted Answer

好吧，为了您的方便，我正在一步一步地阐述它：

从链接下载文件。
将 lib 和源文件夹放在另一个文件夹中。
将您正在编码的文件放在同一个文件夹中。
将所有图像放在同一个文件夹或任何你想放置它们的地方

并将代码编写为

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

score 0 · Accepted Answer

当你想创建类似图片库的东西时，jQuery fancybox将是它的最佳选择。简单且与您的要求相同。请看这里。

score 0 · Accepted Answer

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>

javascript - 如何使用下一步和后退按钮创建 JQuery 图片查看器

4 回答 4

Related

Reference