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   1591 Views

Avatar
gieske

Community Member, 4 Posts

3 December 2011 at 2:03pm

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

Community Member, 61 Posts

3 December 2011 at 10:19pm

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

Community Member, 4 Posts

4 December 2011 at 10:02am

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

Community Member, 4 Posts

4 December 2011 at 12:22pm

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

Community Member, 61 Posts

4 December 2011 at 1:20pm

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

Community Member, 4 Posts

5 December 2011 at 8:27am

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!