1 Topic by ebiwari@gmail.com

  • ebiwari@gmail.com
  • New community member
  • Offline
  • Registered: 2012-02-16
  • Posts: 9

Topic: [Solved] jquery s3slider not working

can any body help me make this jquery  plugin work in wolfcms.. I have follow the procdure...By
putting the  link on my snippest and made a call on my layout..I also added jquery  and javascript on the head of my layout...

It just wont work...(I don't know what i'm getting wrong)
This is the url  to the jquery plugin:  http://www.serie3.info/s3slider/

<div id="s3slider">
   <ul id="s3sliderContent">
      <li class="s3sliderImage">
          <img src="#" />
          <span>Your text comes here</span>
      </li>
      <li class="s3sliderImage">
          <img src="#" />
          <span>Your text comes here</span>
      </li>
      <div class="clear s3sliderImage"></div>
   </ul>

Thumbs up

2 Reply by svanlaere

  • svanlaere
  • Moderator
  • Offline
  • From: Veenendaal, the Netherlands
  • Registered: 2010-01-18
  • Posts: 1,346
  • User Karma: 63

Re: [Solved] jquery s3slider not working

We can't tell what is wrong unless we can see the website/page where you've setup that script.
Check the sourcecode of the demostration to see how it is done:
http://www.serie3.info/s3slider/demonstration.html

svanlaere's Website

Thumbs up

3 Reply by ebiwari@gmail.com

  • ebiwari@gmail.com
  • New community member
  • Offline
  • Registered: 2012-02-16
  • Posts: 9

Re: [Solved] jquery s3slider not working

Can u just give me the procedure u will  take to  install the plugin.. If you are to  use on site u are designing

Thumbs up

4 Reply by svanlaere

  • svanlaere
  • Moderator
  • Offline
  • From: Veenendaal, the Netherlands
  • Registered: 2010-01-18
  • Posts: 1,346
  • User Karma: 63

Re: [Solved] jquery s3slider not working

ebiwari@gmail.com wrote:

Can u just give me the procedure u will  take to  install the plugin.. If you are to  use on site u are designing

Procedure is here:
http://www.serie3.info/s3slider/

What did you put in your snippet?

svanlaere's Website

Thumbs up

5 Reply by ebiwari@gmail.com

  • ebiwari@gmail.com
  • New community member
  • Offline
  • Registered: 2012-02-16
  • Posts: 9

Re: [Solved] jquery s3slider not working

This was put in my snippest:

<div id="s3slider">
   <ul id="s3sliderContent">
      <li class="s3sliderImage">           
          <img src="<?php echo URL_PUBLIC; ?>public/themes/bluebusiness/images/wide/1.jpg" alt="1" />
          <span>Your text comes here</span>
      </li>
      <li class="s3sliderImage">
          <img src="<?php echo URL_PUBLIC; ?>public/themes/bluebusiness/images/wide/2.jpg" alt="2" />
          <span>Your text comes here</span>
      </li>
      <div class="clear s3sliderImage"></div>
   </ul>
</div>

I put this in my layout b4 the closing head tag(</head>)

<script src="<?php echo URL_PUBLIC; ?>public/themes/bluebusiness/jquery-1.7.min.js" type="text/javascript"></script>
  <script src="<?php echo URL_PUBLIC; ?>public/themes/bluebusiness/s3Slider.js" type="text/javascript"></script> 


<script type="text/javascript">
    //content that is suppose  to in head
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 3000
        });
    });
  </script>

I called the snippet in my layout by doing this:

<?php $this->includeSnippet('slider'); ?>

Edit by moderator: added code tags for readability.

Last edited by David (2012-02-19 15:38)

Thumbs up

6 Reply by andrewmman

  • andrewmman
  • Community member
  • Offline
  • From: Spain
  • Registered: 2010-07-08
  • Posts: 341
  • User Karma: 55

Re: [Solved] jquery s3slider not working

ebiwari wrote:

Can u just give me the procedure u will  take to  install the plugin...

Now that's a polite way of asking for help...

Check your jQuery selector and the id you gave your slider container (div), they should probably be the same for this to work.

b.t.w: This is neither a wolf issue or a third-party plugin.

Last edited by andrewmman (2012-02-19 14:31)

Thumbs up

7 Reply by svanlaere

  • svanlaere
  • Moderator
  • Offline
  • From: Veenendaal, the Netherlands
  • Registered: 2010-01-18
  • Posts: 1,346
  • User Karma: 63

Re: [Solved] jquery s3slider not working

ebiwari@gmail.com wrote:

This was put in my snippest:
<div id="s3slider">
-- snip --

Change it to:

<div id="slider">

Make sure the the id of the divider reflects the id in the selector:

   $('#slider').s3Slider({
      timeOut: 4000
   });

Last edited by Fortron (2012-02-19 14:39)

svanlaere's Website

Thumbs up

8 Reply by ebiwari@gmail.com

  • ebiwari@gmail.com
  • New community member
  • Offline
  • Registered: 2012-02-16
  • Posts: 9

Re: [Solved] jquery s3slider not working

andrewmman wrote:
ebiwari wrote:

Can u just give me the procedure u will  take to  install the plugin...

Now that's a polite way of asking for help...

Check your jQuery selector and the id you gave your slider container (div), they should probably be the same for this to work.

b.t.w: This is neither a wolf issue or a third-party plugin.


Sorry i did not mean to  be rude.. .. just did know why it was'nt workin.. I will check what u pointed out... Tanks men i did not see  tat

Thumbs up

9 Reply by ebiwari@gmail.com

  • ebiwari@gmail.com
  • New community member
  • Offline
  • Registered: 2012-02-16
  • Posts: 9

Re: [Solved] jquery s3slider not working

Fortron wrote:
ebiwari@gmail.com wrote:

This was put in my snippest:
<div id="s3slider">
-- snip --

Change it to:

<div id="slider">

Make sure the the id of the divider reflects the id in the selector:

   $('#slider').s3Slider({
      timeOut: 4000
   });

thanks alot.. I have change the contianer tag but is still not working.....

The javascript is displaying on the top of the page..

//content that is suppose to in head $(document).ready(function() { $('#s3slider').s3Slider({ timeOut: 3000 }); }); />

Thumbs up

10 Reply by ebiwari@gmail.com

  • ebiwari@gmail.com
  • New community member
  • Offline
  • Registered: 2012-02-16
  • Posts: 9

Re: [Solved] jquery s3slider not working

Thanks Everyone that read and reply to my post.. I inserted the jquery code b4 the closing tag of the body.. And is now working..
Thanks again for ur respond it was very helpful

<script type="text/javascript">
    //content that is suppose  to in head
    $(document).ready(function() {
        $('#s3slider').s3Slider({
            timeOut: 3000
        });
    });
  </script>

Last edited by David (2012-02-19 15:40)

Thumbs up