javascript, jQuery running a single function with two different inputs at the same time

Question

hey guys just doing some messing around and learning a few new things to kill time at the moment im fiddling with javascript and i have encountered a problem.

so the problem is that i have downloaded a small jQuery slideshow thing of the internet being simple fade slideshow (i have hacked it to pieces removing stuff i didn't deem necessary) and im trying to get it to run two independent slideshows at the same time. i want these slideshows to have different dimensions for width and height preferably transition time also and my problem is that the function will only run one slideshow.

$(document).ready(function(){
    $('#slideshow').fadeSlideShow({
        width: 300,
        height: 343,
    });

is there a way that i can say change #slideshow to #slideshow1 and then have it run on the same bit of code at the same time as #slideshow? obviously i could just change some names around and have a ton of text but id prefer to find a neater way.

im fairly novice so any advice is greatly appreciated

Can you post a link to the plugin you're using? What does your HTML look like? — Austin Mullins
– Austin Mullins, Commented Feb 15, 2013 at 4:56
yep its that library and im using the sample provided so all the stock html and css provided with the plugin — MorleyP
– MorleyP, Commented Feb 15, 2013 at 5:15
thanks for all the help guys i'm guessing that the plugin will not support more than one element so ill try fix that! — MorleyP
– MorleyP, Commented Feb 15, 2013 at 5:20

Mottie · Accepted Answer · 2013-02-15 05:24:42Z

2

$(document).ready(function()
{
     $('#slideshow').fadeSlideShow({ width: 300, height: 343 });
     $('#slideshow1').fadeSlideShow({ width: 300, height: 343 });
});

edited Feb 15, 2013 at 5:24

Mottie

86.8k30 gold badges132 silver badges248 bronze badges

answered Feb 15, 2013 at 4:56

vijaykumar

4,8367 gold badges40 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ian Over a year ago

At the same time, might as well use $('#slideshow, #slideshow1').fadeSlideShow({ width: 300, height: 343, });

Mottie Over a year ago

@Ian: I agree, but the question does state using different dimensions and transition time for each, so this would be the best answer. Except for the trailing commas.

MorleyP Over a year ago

ok so should it should work if i were to alter the width and height values? because when i implement the differing values the function does not work im using the library mentioned above.

Ian Over a year ago

@Mottie Very true, I just said it because the init options were the same in the question. But I probably shouldn't have mentioned that anyways and just suggested changing the width/height values to show they could be different (even if obvious).

Mottie Over a year ago

@user2074307 How much did you modify the original plugin? Are you getting any errors? Honestly, it doesn't look like it's that big (222 lines of code), just minify it if you are that concerned about size.

Jon Jaques · Accepted Answer · 2013-02-15 05:10:26Z

1

Assuming the plugin works with more than one element:

  $('#slideshow', '#slideshow1').fadeSlideShow({
    width: 300,
    height: 343
  });

If the plugin is coded for best practices, the above should work. Looping over an array of selector strings also works in the same manner.

  var slideshows = ['#slideshow', '#slideshow1', '#slideshow2'];
  $.each(slideshows, function(el, i) {
    $(el).fadeSlideShow({
      width: 300,
      height: 343
    });
  });

Otherwise if the divs are in a logical order, you can programmatically construct the selector.

  var slideshowStart = 1;
  var slideshowEnd = 50;
  for(var i = slideshowStart; i <= slideshowEnd; i++) {
    $('#slideshow'+i).fadeSlideShow({
      width: 300,
      height: 343
    });
  }

Alternatively, a good lightweight image slideshow plugin is jQuery.cycle. It is well tested and is extremely extensible.

http://jquery.malsup.com/cycle/

edited Feb 15, 2013 at 5:10

answered Feb 15, 2013 at 5:03

Jon Jaques

4,4202 gold badges25 silver badges25 bronze badges

2 Comments

Ian Over a year ago

For your second example, you might as well use $('#slideshow', '#slideshow1, #slideshow2').each(function () { $(this).fadeSlideShow({ }); });

Jon Jaques Over a year ago

@Ian, true story. My code OCD likes putting things in arrays because they're nicer to format of the list starts becoming unwieldy. I didn't see that OP wanted different settings per element originally.

Ryan · Accepted Answer · 2013-02-15 04:55:06Z

0

Since #slideshow just denotes a DOM element ID, such as a single div or something, can you not change that to #slideshow2 and create an additional div with an ID of slideshow2? If this does not work, then perhaps the slideshow code is written in such a way that this is not possible?

answered Feb 15, 2013 at 4:55

Ryan

7,99711 gold badges67 silver badges121 bronze badges

Collectives™ on Stack Overflow

javascript, jQuery running a single function with two different inputs at the same time

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related