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

问题描述：

上午寻找帮助来解决这个问题，我想创建一个简单的图像查看器与以下规格。如何使用下一个和后退按钮创建JQuery图片查看器

MySQL的抓取图像
用户点击一个图像，以查看（图片查看器弹出，选择的图像示出）
用户可以通过点击NEXT
用户能够看到以查看下一个图像点击上
在ESC图片查看器上一张图片关闭

因为我不擅长在JavaScript中也JQuery的，所以我只是应用基本来产生下面的代码，它不能满足最低期望。而不是显示用户选择的图像显示从无序列表中的第一个图像，并不工作在IE浏览器，除非我申请自动启动我不需要的功能。只有当用户点击next/prev时，才会显示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>

那些谁可以找出这个在其他方面请这样做，已经取得的工作代码被接受

感谢，并作为要视

答

确定你放心，我eleborating一步一步来：

下载从链接中的文件。
将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>

声音现在迎接我认为这是一个有足够的时间来玩它的问题，所以它适合我的用户界面，并点击下一页/上一页也获取有关图片的细节/故事。最后，我还希望删除滑动效果，淡入淡出或无效果将满足我的需求。但是，如果您可以帮助删除效果，我也可以欣赏，因此我们可以应用淡入和淡出甚至没有效果图像在与另一个图像进行交换时不应该向左移动，而应该只是淡入淡出。在其他方面，我可以说它的工作 – codefun

答

创建像图片库，jQuery fancybox将是最好的选择。简单和相同您的要求。请参阅here。

我做从他们那里得到任何东西，因为没有任何解释 – codefun

从这里下载http://fancyapps.com/fancybox/#lice你也可以找到演示例子。如果您找到解决方案，请不要忘记标记回答。 – Aisha

我会尽快回复我收到文件 – codefun

答

OK试试这个代码：

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

感谢您考虑答复，你给我的第一个代码比我想象的更好的工作后，我玩它。 – codefun

答

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

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

相关推荐