CODEWITHSUNDEEP
javascriptjqueryslidergallery
sikitomi
sikitomi

Reputation: 23

jquery each - function from another script

I have a bit of a trouble with jQuery .each() function (still a beginner). What I would like to achieve is to have multiple image sliders on the website, but the sliders scripts I found are mostly using a <div id="slides"> to work and I'd like to make it like <div class="slides"> with the .each method. Of course every script is included in the HTML file, so that can't be the problem.

The initialization is like this in jQuery:

<script>
    $(function(){
      $("#slides").slidesjs({
        width: 940,
        height: 528
      });
    });
  </script>

And I've wrote this in my scrits.js:

$(document).ready(function(){
    $('.slides').each(slidejs({
        width: xxx,
        height: yyy
    });
});

With this script in, the whole thing is dead, no other scripts are working :/ Can You please help me with this?

Thank you very much!

Upvotes: 0

Views: 91

Answers (2)

adeneo
adeneo

Reputation: 318182

You're missing an anonymous function

<script type="text/javascript">
    $(document).ready(function(){
        $('.slides').each(function() {
            $(this).slidejs({
                width: xxx,
                height: yyy
            });
        });
    });
</script>

Upvotes: 1

Hyder B.
Hyder B.

Reputation: 12186

I've understood your point. The easiest way would be to add a common class name (instead of id) to each slider. For example :

<div id="slides1" class="slides">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
  </div>

<div id="slides2" class="slides">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">

  </div>

<div id="slides3" class="slides">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">

  </div>

Then call it this way (notice the '.' instead of '#') :

 $(".slides").slidesjs({
        width: 940,
        height: 528
      });

Upvotes: 1

Related Questions