내 Joomla 웹 사이트에 jquery/isotope를 제대로 구현할 수 없습니다.

내 웹 사이트의 단일 페이지에서 동위 원소 작업을하려고하므로 환상적인 방식으로 웹 비디오를 공유 할 수 있습니다. Isotope 파일을 내 웹 사이트에 업로드 한 다음 한 페이지에 게시 한 기사에 다음 코드를 입력했습니다. 페이지를 검토 할 때 보려는 비디오의 이미지를 볼 수 있으며 클릭하면 볼 수 있지만 애니메이션이나 움직임은 없으며 페이지의 한면에 수직선으로 표시됩니다 .내 Joomla 웹 사이트에 jquery/isotope를 제대로 구현할 수 없습니다.

실수를 저 지르거나 뭔가 이해하지 못했지만 누군가 나를 올바른 방향으로 안내 할 수 있습니까? 사용하는 코드 메신저는 다음과 같습니다 : 자바 스크립트를로드 할 때

<!doctype html> 
<html lang="en"> 
<head> 

    <meta charset="utf-8" /> 
    <title>&middot; Videos</title> 

    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 

    <link rel="stylesheet" href="/public_html/templates/rt_mediamogul/Iso/style.css" /> 


    <!-- scripts at bottom of page --> 

</head> 
<body class="demos "> 



    <section id="content"> 

    <h1>Images</h1> 


<section id="copy"> 
    <p>Isotope is triggered after all images are loaded with the <a href="public_html/templates/rt_mediamogul/Iso/help.html#imagesloaded_plugin"> <code>imagesLoaded</code> plugin</a>. </p> 
    </section> 

    <div id="container" class="photos clearfix"> 

    <div class="photo"> 
    <a href="http://www.youtube.com/watch?v=u_IHMPVFyq8" title="Tiger Surgery on Youtube"><img src="http://i4.ytimg.com/vi/u_IHMPVFyq8/mqdefault.jpg" alt="Science" /></a> 
    </div> 

    <div class="photo"> 
    <a href="http://www.youtube.com/watch?v=vj-H_Mbfvu4" title="Is engineering right for me, on Youtube"><img src="http://i4.ytimg.com/vi/vj-H_Mbfvu4/mqdefault.jpg" alt="Science" /></a> 
    </div> 

    <div class="photo"> 
    <a href="http://www.youtube.com/watch?v=I9t-gYnPNaw" title="A fast math trick, on Youtube"><img src="http://i4.ytimg.com/vi/I9t-gYnPNaw/mqdefault.jpg" alt="Science" /></a> 
    </div> 

    <div class="photo"> 
    <a href="http://www.youtube.com/watch?v=3-tXkRb2GFY" title="Biology by Khan Academy, on Youtube"><img src="http://i4.ytimg.com/vi/3-tXkRb2GFY/mqdefault.jpg" alt="Science" /></a> 
    </div> 

    <div class="photo"> 
    <a href="http://www.youtube.com/watch?v=4FROxZ5i67k" title="Space Shuttle Launch, on Youtube"><img src="http://i4.ytimg.com/vi/4FROxZ5i67k/mqdefault.jpg" alt="Science" /></a> 
    </div> 

    <div class="photo"> 
    <a href="http://www.youtube.com/watch?v=6aK2CKrdjbE" title="Mr Bean does Chemistry"><img src="http://i4.ytimg.com/vi/6aK2CKrdjbE/mqdefault.jpg" alt="Science" /></a> 
    </div> 

    <div class="photo"> 
    <a href="http://www.youtube.com/watch?v=k6U-i4gXkLM" title="Introduction to computer programing, on Youtube"><img src="http://i4.ytimg.com/vi/k6U-i4gXkLM/mqdefault.jpg" alt="Science" /></a> 
    </div> 

    <div class="photo"> 
    <a href="http://www.youtube.com/watch?v=3vgNvXdkQaU" title="Identifying rocks for dinner."><img src="http://i4.ytimg.com/vi/3vgNvXdkQaU/mqdefault.jpg" alt="Science" /></a> 
    </div> 

    <div class="photo"> 
    <a href="http://www.youtube.com/watch?v=NHjLO_cw5iE" title="Punk economics in Ireland"><img src="http://i4.ytimg.com/vi/NHjLO_cw5iE/mqdefault.jpg" alt="Science" /></a> 
    </div> 

</div> <!-- #container --> 

    <script src="public_html/templates/rt_mediamogul/Iso/jquery-1.7.1.min.js"></script> 
    <script src="public_html/templates/rt_mediamogul/Iso/jquery.isotope.min.js"></script> 
    <script> 
$(function(){ 


    var $container = $('#container'); 

    $container.imagesLoaded(function(){ 
    $container.isotope({ 
     itemSelector : '.photo' 
    }); 
    }); 


});

출처

2012-06-21 user1364818

왜 벽돌을 사용하지 않습니까? 동위 원소는 자유롭지 않은가? – Bytemain

파일을 다운로드하는 데 문제가 없습니다. – user1364818

난 당신이 HTML에 추가 할 수 없습니다 꽤 확신 태그 등은 기본적으로 완전히 새로운 페이지처럼 취급하므로 기사에 추가하십시오. 따라서 다음이 작동하지 않습니다

<!doctype html> 
<html lang="en"> 
<head> 

    <meta charset="utf-8" /> 
    <title>&middot; Videos</title> 

    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 

    <link rel="stylesheet" href="/public_html/templates/rt_mediamogul/Iso/style.css" /> 


    <!-- scripts at bottom of page --> 

</head>

도 body 태그 페이지로 이미 때문에 페이지를 만들고이 2 개 body 태그가있다 할 것이다. 당신은 간단한 모듈을 만들고 기사에 embed하고 각 스크립트에 대해 다음과 같은 코드를 추가하면됩니다.

$document->addScript(JURI::root() . "modules/mod_yourmodule/script.js");

출처

2012-06-21 13:27:58 Lodder

이 public_html을하기 전에 슬래시를 추가

<script src="/public_html/...">

출처

2012-06-21 05:58:20 Arnaud

내 Joomla 웹 사이트에 jquery/isotope를 제대로 구현할 수 없습니다.

답변

관련 문제