Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions

Jquery doesn work without error message


Reply

6 Posts   1520 Views

Avatar
gieske

3 December 2011 at 2:03pm Community Member, 4 Posts

Hello,

I hope someone has an answer to this problem.

I you look at this link you will see an error message: http://www.deltazuid.nl/communicatie/portfolio/corporate/album/tom-van-zeeland

I know there is a </div> to much, but when i remove that </div> the Jquery slider wont load the images anymore.

Pagecode:    

<head>
      <% base_tag %>
      <link rel="stylesheet" type="text/css" href="themes/deltazuid/css/layout.css" />
      <link rel="stylesheet" type="text/css" href="themes/deltazuid/css/typography.css" />
      <link rel="stylesheet" type="text/css" href="themes/deltazuid/css/form.css" />
      
      <link rel="stylesheet" type="text/css" href="themes/deltazuid/css/global.css" />

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
   <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
   <script src="themes/deltazuid/js/slides.min.jquery.js"></script>
   <script>
      $(function(){
         $('#slides').slides({
            preload: true,
            preloadImage: 'themes/deltazuid/img/loading.gif',
            play: 5000,
            pause: 2500,
            hoverPause: true
         });
      });
   </script>

</head>

OtherTemplateCode:    

<div id="container">
      <div id="example">
         <div id="slides">
            <div class="slides_container">
                     
                     
                     $GalleryLayout

            </div>
            <a href="#" class="prev"><img src="themes/deltazuid/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
            <a href="#" class="next"><img src="themes/deltazuid/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
         </div>
         <img src="themes/deltazuid/img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
         </div>
      </div>
   </div>

Avatar
stallain

3 December 2011 at 10:19pm Community Member, 61 Posts

Hello, it seems that http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js is not accessible. Maybe try another CDN ?

Avatar
gieske

4 December 2011 at 10:02am Community Member, 4 Posts

I saved the .JS code in my own root, so i don't have to load it from an other site.

But when is look at this javascript:    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Is see this message in chrome: jquery.min.js:16 Uncaught TypeError: Object#<Object> has not methos 'slides'

What do I have to do to let it work?

Avatar
gieske

4 December 2011 at 12:22pm Community Member, 4 Posts

I think the following thing is the problem.

I try to comine a Jquery .JS from a slider with the .JS code of the image-gallery module. When the page loaded, the .JS from the image-gallery shows up at the bottom in the html page and overwrite the Jquery .JS.

When I look at other pages than the image-gallery, then the Jquery .JS works normally.

See the differents:

http://www.deltazuid.nl/communicatie/portfolio/corporate/
http://www.deltazuid.nl/communicatie/portfolio/corporate/album/tom-van-zeeland

Do someone knows how I delete the .JS links of the image-gallery module, so they won't show up?

Avatar
stallain

4 December 2011 at 1:20pm Community Member, 61 Posts

You can block any js requirement from your page controller :

public function init() {
parent::init();
Requirements::block('path-to-the-js-file.js');
}

Another thing to do is replace all your "$" selectors by "jQuery" : jQuery('#s4') instead of $('#s4')
The use of the $ selector may conflict with other js libraries.

Avatar
gieske

5 December 2011 at 8:27am Community Member, 4 Posts

I solved the problem. I find the .JS in the lightbox of the image-gallery and removed them all, because i don't need them for the website.

So the other custom .JS works without problem of the lightbox .JS.

Thnx for the feedback Stallain!