CODEWITHSUNDEEP
jqueryjoomlajquery-isotope
user1364818
user1364818

Reputation: 61

Can't implement jquery/isotope on my Joomla website properly

I'm trying to get isotope working on a single page of my website so I can share web videos in a fancy way. I uploaded the Isotope files into my website and then put the following code into an article which I published on a single page. When I review the page I can see images of the videos I want to watch, and when I click on them I can watch them but there is no animation or movement, the images are static and in a vertical line on one side of the page.

I've made some kind of mistake or havn't understood something, could someone point me in the right direction. The code im using is below:

<!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'
    });
  });


});

Upvotes: 0

Views: 762

Answers (2)

Lodder
Lodder

Reputation: 19733

I am pretty certain you can't add in the html tags etc to an article as this is basically treating it like a completely new page. Therefore the following won't work:

<!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>

nor will body tags as the page already has this therefore you are making the page have 2 body tags. You can create a simple module, embed it in your article and use the for each script, simple add the following code to the php section at the top:

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

Upvotes: 1

Arnaud
Arnaud

Reputation: 412

Add a slash before public_html when loading javascripts:

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

Upvotes: 0

Related Questions