Question

我不知道为什么jquery galleryview不能在modal中工作

的jQuery

<script type='text/javascript' src="js/jquery-1.3.2.min.js"></script>
<script type='text/javascript' src="js/jquery.simplemodal-1.3.3.js"></script>
<script type='text/javascript' src="js/basic.js"></script>

<script type="text/javascript" src="js/jquery.timers-1.2.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="js/jquery.galleryview-3.0.js"></script>         

<script type="text/javascript">
    $(document).ready(function(){
        $('#myGallery').galleryView({
        panel_width: 460,
        panel_height: 300,
        frame_width: 100,
        frame_height: 70        
        });
    });
</script>

CSS

#basic-modal-content{display:none;}
/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:wait;}
/* Container */
#simplemodal-container{width:500px; height:500px; overflow:hidden;}
#simplemodal-container .simplemodal-data{}
#simplemodal-container .header{width:500px; height:50px; background:url(../images/system/modal-header-bg.png) no-repeat;}
#simplemodal-container .header span{display:block; width:400px; height:30px; color:#65707b; font-size:1.2em; font-weight:bold; margin-left:20px; line-height:4em;}
#simplemodal-container a.modalCloseImg{display:block; width:20px; height:20px; background:url(../images/system/modal-close-normal.png) no-repeat;  position:absolute; top:20px; right:20px; cursor:pointer;}
#simplemodal-container a.modalCloseImg:hover{background:url(../images/system/modal-close-hover.png) no-repeat;}
#simplemodal-container .content{width:500px; overflow:hidden; background:url(../images/system/modal-content-bg.png) repeat-y;}
#simplemodal-container .content-holder{width:460px; margin:10px 20px; overflow:hidden; text-align:center;}
#simplemodal-container .content-holder h1{margin:10px auto; color:#65707b}
#simplemodal-container .footer{width:500px; height:20px; background:url(../images/system/modal-footer-bg.png) no-repeat;}

#simplemodal-container img.ImgMainView{width:300px;}
#simplemodal-container .thumbnail-holder{width:458px; overflow:hidden; clear:both;}
#simplemodal-container .thumbNav{width:25px; height:25px; float:left; margin:40px 2px 0px 2px;}
#simplemodal-container .thumbImg{width:88px; float:left; border:1px solid #d6d6d6; margin:5px;}
#simplemodal-container .thumbImg img{width:80px; margin:4px;}

HTML

<div id='basic-modal'><a href='#' class='basic'>Demo</a></div>

<div id="basic-modal-content"><div class="header"><span>More Images</span></div>
    <div class="content">
         <div class="content-holder">

        <ul id="myGallery">
                <li><img src="images/data/sample1.jpg" title="BloodSeeker" /></li>
                <li><img src="images/data/sample2.jpg" title="DrawRanger" /></li>
                <li><img src="images/data/sample3.jpg" title="Morpling" /></li>
                <li><img src="images/data/sample4.jpg" title="lina" /></li>                
            </ul>

        </div>
    </div>
    <div class="footer"></div>
</div>

但是如果你把这个代码带到模态之外它可以正常工作

    <ul id="myGallery">
            <li><img src="images/data/sample1.jpg" title="BloodSeeker" /></li>
            <li><img src="images/data/sample2.jpg" title="DrawRanger" /></li>
            <li><img src="images/data/sample3.jpg" title="Morpling" /></li>
            <li><img src="images/data/sample4.jpg" title="lina" /></li>                
        </ul>

如果它是在模态内部，则Jquery Galleryview不起作用

0 个答案: