Trying to use cycle inside of grid entry

[ashleycam3ron]

I'm trying to use the malsup cycle plugin dynamically inside each grid list entry. On clicking the pager items, there's a jump to the top of the page. Any ideas on how to overcome this? Is the preventDefault a conflict with the cycle plugin? Thank you for any help. Here's the test page:

http://minnowproject.com/beta/

[orion3dgames]

Hello,

There should be no problem launching any plugins from within a grid list entry. You should of course fire it dynamically inside the gridder function.

I'll give this a try later on, and see if i can help you.

Bye, orion

[ashleycam3ron]

Thank you for the reply. I'll be interested to see what you find out. I'm not an expert with jQuery by any means; could you please provide an example or further explanation of firing the other plugin dynamically? There are actually 2 issues I'm having; the pager issue and when I click the grid to play the slideshow within, the cycle plugin stops. Cycle works when taken outside of gridder, just not in it. I may need to set up a test show/hide of cycle to see if it handles that.

[orion3dgames]

Hello Ashley.

Yes, it's hard to get your head around it, but you will get better after a while.

The scroll to top was intended, you can remove by deleting these lines :

/* Scrolls to the current row */
$('html, body').animate({
scrollTop: $(this).position().top
}, 0);

Concerning your cycle issue, it's because of how jQuery works. A dynamic button needs to be fired by a "on" function:
$('.gridder').on('click', '.carousel-control.left', function() { Action here });

Have a look at this : http://oriongunning.com/demo/gridder/cycle.html

The first item has a bootstrap slideshow attached, and works fine.

Have a look at my example and you should be fine.

Also, no need to have another slideshow plugin, as you already have a good one included in Bootstrap. Check it out : http://getbootstrap.com/2.3.2/javascript.html#carousel

[ashleycam3ron]

You are so awesome! Thank YOU so much!

[ashleycam3ron]

Have you tried more than one slideshow? I am having some glitches with more than one.
The pager isn't clickable for its respective data-slide and the .prev & .next areas are confused.

Each .list is pulling content dynamically for multiple slideshows:
http://minnowproject.com/beta/

[orion3dgames]

Yeah, you probably need to give each slideshow a unique id and the arrows to point to the correct id. At the moment they are all going to .carousel.

Basically, each slider should have an id, ex : #slider1, #slider2 etc...
Each arrow should point to the correct slider, ex: href="#slider1" ... etc...

That should solve the problem.

I'm really a beginner, and still learning :)

If i get time today, i'll see if can give you an example.

Edited: Actually, after looking a bit closer, it is the case, it should be working then...