bahar.wadia
Posts: 0
Joined: Wed Aug 07, 2013 2:05 am

Using Carousel with javascript.

Has anyone successfully implement the carousel component and manipulated the component with javascript ?

I have tried to get this to work for over a month and have had no luck.

I have been pointed to the same documentation many times and I'll keep my comments to myself :(

Here is all I am trying to do:

1) Add images to the carousel via javascript

2) Delete images from the carousel via javascript

A simple example will go a long ways. PLEASE HELP !!

Alena Prykhodko
Posts: 0
Joined: Tue Apr 09, 2013 7:36 am

Using Carousel with javascript.

Hello!

Please post JS code you tried..

bahar.wadia
Posts: 0
Joined: Wed Aug 07, 2013 2:05 am

Using Carousel with javascript.

Appery('mobilecarousel_7').add('image','', value);

Appery('mobilecarousel_7').refresh();

Where value is a dataURL that I receive from the REST database

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

Using Carousel with javascript.

Hi Bahar,

You can't create new Carousel items yet. You can create GenericService and there generate the required items, and then map them to the Carousel.

Here is a workaround for adding new frames in runtime. The following code adds one frame with an image:
codevar new_frame = $("<div><&#47;div");
new_frame&#46;attr({
"id": "tester", &#47;&#47; required!
"data-type": "image", &#47;&#47; required!
"data-title": "tester",
"data-image-url": "http:&#47;&#47;dummyimage&#46;com&#47;600x400&#47;91b8c9&#47;15f1e6"
});

Appery( "mobilecarousel_5" )&#46;carouselRoot&#46;find( "&#46;ui-carousel-items" )&#46;append( new_frame );
Appery( "mobilecarousel_5" )&#46;carouselRoot&#46;carousel( "refresh" );/code
Unfortunately, the data (frame settings) should be added via attributes, not with code$&#46;data()/code

The same is for HTML frame. Add the needed content in "new_frame".

Here is the deletion:codeAppery( "mobilecarousel_5" )&#46;carouselRoot&#46;carousel( "remove", index );
&#47;&#47; or
Appery( "mobilecarousel_5" )&#46;carouselRoot&#46;carousel( "remove", 0, $frame_dom_element );/code

bahar.wadia
Posts: 0
Joined: Wed Aug 07, 2013 2:05 am

Using Carousel with javascript.

Ok. I will try this.

bahar.wadia
Posts: 0
Joined: Wed Aug 07, 2013 2:05 am

Using Carousel with javascript.

Awesome!

That worked out quite nicely !

bahar.wadia
Posts: 0
Joined: Wed Aug 07, 2013 2:05 am

Using Carousel with javascript.

I have a followup question.

How can I find a frame with a specific Title ?

I want to find the frame with a specific Title and delete.

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

Using Carousel with javascript.

Hello! Try this code:
preAppery( "mobilecarouselName" )&#46;carouselRoot&#46;carousel( "remove", 0, $("[dsid=mobilecarouselName]")&#46;find('div[data-title="Title text"]')&#46;eq(0));/pre

bahar.wadia
Posts: 0
Joined: Wed Aug 07, 2013 2:05 am

Using Carousel with javascript.

That works well!

bahar.wadia
Posts: 0
Joined: Wed Aug 07, 2013 2:05 am

Using Carousel with javascript.

How could I iterate through the Carousel and retrieve the images from each frame.

Thanks

Return to “Issues”