0

リンクをクリックして div コンテンツを変更する Web ページを取得しようとし#portfolioWorkています。以前にここに投稿されたスクリプトを試しましたが、呼び出す ID を切り替えた後でもうまくいきません。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>



<script>
$('#GFXWork').click(function(){
    $('#portfolioWork').load('portfolioContent.html #motionGraphics');
}
</script>


<nav id="portfolioNav">
<ul>
<li id="portfolio-compositing"><a href="#">Compositing</a></li>
<li id="portfolio-animation"><a href="#">Animation</a></li>
<li id="portfolio-motionGfx"><a id="GFXWork" href="#">Motion Graphics</a></li>
<li id="portfolio-3D"><a href="#">3D</a></li>
</ul>
</nav>

<div id="portfolioWork">

<div id='Portfolio3D'>
<a class="fancyYoutube" href="http://www.youtube.com/watch?v=rATNlIvsOWk">
<figcaption id="BikeRender">
<div class="captiontitle">3D Ident to Music</div>
<p class="maincaption">Apply attractive visuals to a short soundtrack to create an ident. Explore 3D particle systems and other simulation techniques to work towards the final outcome.</p>
<p class="captionFooter">Autodesk Maya and Adobe Photoshop were used.</p>
</figcaption>
<img src="Images/ident2Small.png"/></a>

<a class="fancyYoutube" href="Images/3DBikeLarge.png">
<figcaption id="BikeRender">
<div class="captiontitle">Rendering Techniques</div>
<p class="maincaption">Use reference materials to accurately texture a 3D bicycle model and light it to products standards. Composite the render outcomes to achieve quality images.</p>
<p class="captionFooter">Autodesk Maya and Adobe Photoshop were used.</p>
</figcaption>
<img src="Images/3DBikeSmall.png"/></a>

<a class="fancyChurch" rel="churchPoster" href="Images/PosterChurchLarge.png">
<figcaption id="ChurchRender">
<div class="captiontitle">Realistic Modelling</div>
<p class="maincaption">Gather reference materials in order to create a full 3D replica of a local building. Using a wide range of modelling techniques, add lights, textures and shaders for a complete effect.</p>
<p class="captionFooterChurch">Autodesk Maya and Adobe Photoshop were used.</p>
</figcaption>
<img src="Images/3DChurchSmall.png"/>
<a class="fancyChurch2" rel="churchPoster" href="Images/PosterChurch_AO.png">
</a>
</div> <!-- End of 3DWork -->
</div> <!-- End of PortfolioWork

ここでは、portfolio.html ページの横のルート フォルダーにある、portfolioContent.html という html ファイルにリンクする必要があります。

ポートフォリオコンテンツ.html:

<div id="motionGraphics">
<a class="fancyYoutube" href="http://www.youtube.com/watch?v=rATNlIvsOWk">
<figcaption id="BikeRender">
<div class="captiontitle">3D Ident to Music</div>
</figcaption>
<img src="Images/ident2Small.png"/></a>

<a class="fancyYoutube" href="Images/3DBikeLarge.png">
<figcaption id="BikeRender">
<div class="captiontitle">Rendering Techniques</div>
<p>BLAAAAAAAAAAAH</p>
</figcaption>
<img src="Images/3DBikeSmall.png"/></a>

<a class="fancyChurch" rel="churchPoster" href="Images/PosterChurchLarge.png">
<figcaption id="ChurchRender">
<div class="captiontitle">Realistic Modelling</div>
<p class="maincaption">Gather reference materials in order to create a full 3D replica of a local building. Using a wide range of modelling techniques, add lights, textures and shaders for a complete effect.</p>
<p class="captionFooterChurch">Autodesk Maya and Adobe Photoshop were used.</p>
</figcaption>
<img src="Images/3DChurchSmall.png"/>
<a class="fancyChurch2" rel="churchPoster" href="Images/PosterChurch_AO.png">
</a>
</div> <!-- End of motionGraphcs -->

私は今、問題が何であるかについて完全に迷っているので、そのような助けは大歓迎です!

4

3 に答える 3

2

Put your code inside DOM ready: http://api.jquery.com/ready/

<script type="text/javascript">
$(document).ready(function() {

    $('#GFXWork').click(function(){
        $('#portfolioWork').load('portfolioContent.html #motionGraphics');
    });

});
</script>

Since you use old version of JQuery, use this code for fancybox:

$('.fancyYoutube').live('click',function(){

$.fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'width' : 680,
'height' : 395,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : true
}
});
return false;
});
$("a[rel=churchPoster]").fancybox({
        'interval'          :  2500,
        'transitionIn'      : 'elastic',
        'transitionOut'     : 'elastic',
        'showNavArrows'     : 'true',  
        'width'             :  680,
        'height'            :  395
    });

However, live() is deprecated: http://api.jquery.com/live/, maybe you could update JQuery, and use on() - rather. As i can see they recommend delegate() method for older versions... However, this will work. :)

于 2013-06-29T00:49:47.953 に答える
0

画像への手動呼び出しについては、fancybox 手動呼び出しの例を確認した後 (場合によっては、マニュアル/ドキュメントを注意深く読むことは良いことです:))、ここに解決策があります:

$(document).ready(function() {

// in your case $(".fancyChurch").live('click',function() {

    $("#fancyChurch").live('click',function() {

        $.fancybox({
            'interval'          :  2500,
            'transitionIn'      : 'elastic',
            'transitionOut'     : 'elastic',
            'showNavArrows'     : 'true',  
            'width'             :  680,
            'height'            :  395,
            'href'              : 'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg' //path to your church image


        });    
        return false;
    });
});

そのため、画像を「手動で」呼び出す場合、彼らが言うように - href オプションを提供する必要があります。:)

于 2013-06-29T10:52:49.930 に答える