0

$(window).load() を使用してサムネイルギャラリーの画像サイズを変更し、その後画像サイズに基づいてスライドショーを構成しています。何らかの理由で、コードが 2 回実行されています。これは、構成関数で jQuery を使用して div を別の div にラップしているためです。ただし、ページの読み込み時に HTML を見ると、同じ div の 2 つのインスタンスがラップされています。

私はjavascriptデバッガーを使用して何が起こっているのかを調べ、コードが実行されてjquery-min.jsに入り、2回目に呼び出されたかのように関数に戻りました。これが私のコードです:

HTML

<?php session_start(); include ('dbConfig.php'); include('main.php'); ?>
<!DOCTYPE html>
<html>
<head>
<title>Main Gallery</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>


<!--[if IE]>

   <style type="text/css">

   .transblack { 
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000); 
       zoom: 1;
    } 
     .transwhite { 
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50FFFFFF,endColorstr=#50FFFFFF); 
       zoom: 1;
    } 

    </style>

<![endif]-->
<script>
$(window).load(function(){
$('#gallery ul li').each(function() {

    var $frame = $(this).children('div');
    $frame.children('img').superFit(); 

});


$('#gallery').css('visibility', 'visible');
configGallery();
});

$(document).ready(function(){


$('#filter').hide();
$('#photoWrap').hide();
$('#gallery').css('visibility', 'hidden');

});
</script>
</head>

<body>

<div id="mainWrap">
<?php include('adminPanel.php'); ?>
    <div id="photoWrap">
    <div id="controlLeft" class="control"></div>
        <div id="slideShow">
            <div id="slideContainer">

                        <?php
                            if(isset($_GET['c']) && isset($_GET['p']))
                            {
                                if(isAuthentic($_GET['c'], $_GET['p']))
                                {
                                    getSlideshow($_GET['c']);
                                }else{
                                    getSlideshow();
                                }
                            }else{
                                getSlideshow();
                            }
                        ?>

            </div>
        </div>
        <div id="controlRight" class="control"></div>
    </div>

<div id="container">

    <div id="filter" class="transblack"></div>


    <div id="titleWrap"></div>
    <div id="navWrap">
        <div id="nav">
            <ul>
                <li><a href="index.php">Home</a></li>
                <li><a href="gallery.php">Gallery</a></li>
                <li><a href="contact.php">Contact</a></li>
            </ul>
        </div>
    </div>

    <div id="clientHolder">
        <span id="clientSelector">Select Gallery: <select onchange="getGallery(document.getElementById('clientSelect').value)" id="clientSelect">
            <option value="-2">--Select--</option>
            <option value="-1">Public Gallery</option>
            <?php 
                if(isset($_GET['c']) && isset($_GET['p']))
                {
                    if(isAuthentic($_GET['c'], $_GET['p']))
                    {
                        getClients($_GET['c']);
                    }else{
                        getClients();
                    }
                }else{
                    getClients();
                }
                ?>
        </select></span>
    </div>
    <div id="gallery">
        <ul>
        <?php 
            if(isset($_GET['c']) && isset($_GET['p']))
            {
                if(isAuthentic($_GET['c'], $_GET['p']))
                {
                    getMain($_GET['c']);
                }else{
                    echo "<h2>The password you entered was incorrect</h2>";
                }
            }else{
            getMain();
            }?>
        </ul>
    </div>
</div>
</div>

<script src="js/md5.js" type="text/javascript"></script>
<script src="js/helper.js" type="text/javascript"></script>
<script src="js/superFit.js" type="text/javascript"></script>
</body>
</html>

Javascript この最初のものは、私が作成した jQuery プラグインです

(function($) {

    $.fn.superFit = function(options) {

        var $this = $(this);
        var parent = $this.parent();
        var parentW = parent.width();
        var parentH = parent.height();
        var imgW = $this.width();
        var imgH = $this.height();

        var imgRatio = imgH / imgW;
        var parentRatio = parentH / parentW;



            if(imgRatio < parentRatio) //We have a landscape image
            {
                //First set the height of image to be 100%;
                $this.css('height', '100%');
                imgW = $this.width();
                parentW = parent.width();

                //Now center the image
                $this.css('margin-left', -(imgW/2)+(parentW/2));

            }else{ //We have a portrait image
                $this.css('width', '100%');
            }



    }
        })(jQuery);

そして、これは2回呼び出される関数です

function configGallery()
{

var currentPosition;
var slides = $('.slide');
var currentSlide;
var currentImg;
var slideWidth = 720;
var numberOfSlides = slides.length;

 var imgRatio;
 var slideRatio = $('#slideShow').height() / slideWidth;

 slides.wrapAll('<div id="slideInner"></div>');



$('.imgHolder').click(function(){
        $('#filter').show();
        $('#photoWrap').show();
        currentPosition = $('.imgHolder').index(this);

        $('#slideShow').width(slideWidth);

      // Remove scrollbar in JS
      $('#slideContainer').css('overflow', 'hidden');

      //Change image size based on resolution

      // Wrap all .slides with #slideInner div
      slides.css({
        'float' : 'left',
        'width' : slideWidth
      });

        // Set #slideInner width equal to total width of all slides
        $('#slideInner').css('width', (slideWidth * numberOfSlides));

        // Hide left arrow control on first load
        manageControls(currentPosition);

        $('#slideInner').css('margin-left' , slideWidth*(-currentPosition));

        $('#photoWrap').css('margin-top', (screen.height/3)-($('#photoWrap').height()/3));

        changeSize();
});

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
    currentPosition = ($(this).attr('id')=='controlRight') ? currentPosition+1 : currentPosition-1;

    manageControls(currentPosition);

    changeSize();

    $('#slideShow').width(slideWidth);


      $('#slideInner').css('margin-left', slideWidth*(-currentPosition));

    });

    $('#filter').click(function(){
        $(this).hide();
        $('#photoWrap').hide();
    });
  // manageControls: Hides and shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==-1){   currentPosition = numberOfSlides-1; }
    else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides){ currentPosition = 0; }
    else{ $('#rightControl').show() }
    }

function changeSize(){

      currentSlide = $('.slide').get(currentPosition);
      currentImg = $(currentSlide).children('img').first();
      imgRatio =  $(currentImg).height() / $(currentImg).width(); 

    if(imgRatio < slideRatio)
    {
        $(currentImg).addClass('landscape');
        //Vertically align
        var thisHeight = $(currentImg).height();
        $(currentImg).css('margin-top', ($('#slideShow').height()/2)-(thisHeight/2));

    }else{
        $(currentImg).addClass('portrait');
    }


}



}
4

2 に答える 2

1

なぜ $(window).load() を使用しているのですか? 明確な理由があるかどうかを尋ねています。

標準的な jQuery の方法では、次の方法で DOMReady を使用します。

$(document).ready()

または:

$(function(){

});
于 2012-08-02T18:42:08.410 に答える
-3
var once = false;
function configGallery() {
    if ( ! once) {
        once = true;

        // Rest of the function
    }
}

これにより、一度だけ実行されます。

于 2012-08-02T18:37:15.830 に答える