javascript – creating an object/class and using it in jquery – Education Career Blog

Hi sorry if the name of my question is not correct.

i am trying to create an image rotator, but i would like to be able to re-use it more than once in a page, so i am trying to create it as an object/class.

I have about 5 or 6 images on a page.
i would like to have each image as a rotator, displaying a new image every 2 seconds or so.

    <img src="uploads/Range_Images/p6-7.jpg" class="myclass1"/>
    <img src="uploads/Range_Images/p6-7.jpg" class="myclass2"/>
    <img src="uploads/Range_Images/p6-7.jpg" class="myclass3"/>
    <script type=text/javascript>
       $Rotator1 = new imageRotator1('p12-13.jpg:p18-19.jpg:p4-5.jpg:p8-9.jpg:p6-7.jpg:p10-11.jpg:p14-15.jpg:p16-17.jpg', '.myclass1');
       setInterval($Rotator1.rotateImage(), 1000);

       $Rotator2 = new imageRotator1('p12-13.jpg:p18-19.jpg:p4-5.jpg:p8-9.jpg:p6-7.jpg:p10-11.jpg:p14-15.jpg:p16-17.jpg', '.myclass2');
       setInterval($Rotator2.rotateImage(), 1000);

       $Rotator3 = new imageRotator1('p12-13.jpg:p18-19.jpg:p4-5.jpg:p8-9.jpg:p6-7.jpg:p10-11.jpg:p14-15.jpg:p16-17.jpg', '.myclass3');
       setInterval($Rotator3.rotateImage(), 1000);
    </script>

Thats the code i am using to display the images and to create an instance of my rotator class

I can think of a few issues i am not sure of the answers too despite googling for hours!
Firstly here is my code (i am mixing javascript with jquery which is probably where i am going wrong to start with…

<script type="text/javascript">
   $(document).ready(function(){ // maybe this should not be used when creating a object/class???

   // i want to use this function as a class if possible     
   function imageRotator($images_str, $class){
      // set up the vars
      this.myImg = $images_str; //string containing image names
      this.myClass = $class; //string containing class of image to change
      this.imagelist = this.myImg.split(':'); //split the image string into an array
      this.index = 1; // set the current index count


      // maybe this is where i am going wrong, as in jquery $(this) refers to the current selector and maybe this.myclass (from from the imageRotator object does not work??
      // is it possible to reference a value from an object in jquery?
      function prototype.rotateImage(){
         $(this.myclass).fadeOut('fast', function(){
            $(this).attr('src', this.imagelistthis.index);
            $(this).fadeIn('fast', function(){
               if (this.index == this.imagelist.length-1){
                  this.index = 0;
               }else{
                  this.index++;
               };
            });
         });
      };
   };
});
</script>

I am by no means an expert in programming, but i am sure this should be possible somehow.

any help would be much appreciated 😛

update:

ok have modified the code slightly as per castrohenges reply:

<script type="text/javascript">
   $(document).ready(function(){ 
    var imageRotator = function($images_str, $class){
      // set up the vars
      this.myImg = $images_str; //string containing image names
      this.myClass = $class; //string containing class of image to change
      this.imagelist = this.myImg.split(':'); //split the image string into an array
      this.index = 1; // set the current index count
   };
    function imageRotator.prototype.rotateImage(){
        $(this.myclass).fadeOut('fast', function(){
            $(this).attr('src', this.imagelistthis.index);
            $(this).fadeIn('fast', function(){
                if (this.index == this.imagelist.length-1){
                    this.index = 0;
                }else{
                    this.index++;
                };
            });
        });
    };
});
</script>

</head>

<body>
<img src="uploads/Range_Images/p6-7.jpg" class="myclass1"/>
    <img src="uploads/Range_Images/p6-7.jpg" class="myclass2"/>
    <img src="uploads/Range_Images/p6-7.jpg" class="myclass3"/>
<script type=text/javascript>
    $(document).ready(function(){
             $Rotator1 = new imageRotator('p12-13.jpg:p18-19.jpg:p4-5.jpg:p8-9.jpg:p6-7.jpg:p10-11.jpg:p14-15.jpg:p16-17.jpg', '.myclass1');
             setInterval($Rotator1.rotateImage(), 1000);

             $Rotator2 = new imageRotator('p12-13.jpg:p18-19.jpg:p4-5.jpg:p8-9.jpg:p6-7.jpg:p10-11.jpg:p14-15.jpg:p16-17.jpg', '.myclass2');
             setInterval($Rotator2.rotateImage(), 1000);

             $Rotator3 = new imageRotator('p12-13.jpg:p18-19.jpg:p4-5.jpg:p8-9.jpg:p6-7.jpg:p10-11.jpg:p14-15.jpg:p16-17.jpg', '.myclass3');
             setInterval($Rotator3.rotateImage(), 1000);
        });
</script>
</body>

i was getting an error: image rotator not defined on line 45

hence changing it to

var imageRotator = function($images_str, $class){....};

but the error is still there?

will try recreating this script following the plug-in guidelines and see where i get….

,

If you want to use prototyping you need to change

function prototype.rotateImage(){

and place it outside of the imageRotator function. Like so:

function imageRotator($images_str, $class){ ... }

imageRotator.prototype.rotateImage = function() { ... }

Alternatively you could also take a look at this jQuery plugin http://malsup.com/jquery/cycle/ – this is the first one I found, but I’m sure there will be more out there.

If you do want to use your own custom code I recommend wrapping it up as a jQuery plugin – http://docs.jquery.com/Plugins/Authoring. That way you don’t have to worry to much about class architecture and everything will be nicely encapsulated in the jQuery object.

Leave a Comment