0

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

4

4 に答える 4

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>
于 2013-06-26T11:42:34.097 に答える
0

画像ギャラリーのようなものを作成したい場合は、jQuery fancyboxが最適です。シンプルで要件と同じ。こちらをご覧ください。

于 2013-06-26T09:44:57.993 に答える
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>
于 2014-07-08T12:28:32.763 に答える