5 Answers, 1 is accepted
In case you would like to start the slideshow automatically you can handle the OnImageGalleryCreated client event. In it you can attach handler for the mouseover and mouseout events of the image element. This way you can control when the slideshow will be playing.
Check out the code snippets below that illustrate the approach.
Markup:
<
telerik:RadImageGallery
runat
=
"server"
ID
=
"RadImageGallery1"
>
<
ClientSettings
>
<
ClientEvents
OnImageGalleryCreated
=
"imageGalleryCreated"
/>
</
ClientSettings
>
<
Items
>
<
telerik:ImageGalleryItem
ImageUrl
=
"~/Images/image1.jpg"
Title
=
"title 1"
Description
=
"description 1"
/>
<
telerik:ImageGalleryItem
ImageUrl
=
"~/Images/image2.jpg"
Title
=
"title 2"
Description
=
"description 2"
/>
<
telerik:ImageGalleryItem
ImageUrl
=
"~/Images/image3.jpg"
Title
=
"title 3"
Description
=
"description 3"
/>
</
Items
>
</
telerik:RadImageGallery
>
JavaScript:
function
imageGalleryCreated(sender, args) {
var
gallery = sender;
gallery.playSlideshow();
$telerik.$(
".rigActiveImage"
).on(
"mouseover"
,
function
() {
gallery.stopSlideshow();
});
$telerik.$(
".rigActiveImage"
).on(
"mouseleave"
,
function
() {
gallery.playSlideshow();
});
}
Regards,
Viktor Tachev
Telerik
See What's Next in App Development. Register for TelerikNEXT.
Viktor,
Thanks, but I know how to stop and start. How about pause(if you read my question you would see I already knew how to stop and start)? There is a difference.
With pause I would assume the progress bar would resume instead of starting over. Should I assume pause is not available at the moment?
Thanks, Marty
I apologize for misunderstanding your query.
I am afraid that currently pausing the progress bar in RadImageGallery is not available. I have logged the functionality as feature request in our Ideas & Feedback Portal. You can see it in the link below. You can also vote for the feature in order to increase its development priority.
As an alternative you might consider the RadRotator control. It provides the pause functionality out of the box. You can turn the feature on and off via the PauseOnMouseOver property. Check out the following online demo that illustrates how the control works.
Please examine the RadRotator control and see if it is suitable for your scenario.
Regards,
Viktor Tachev
Telerik
See What's Next in App Development. Register for TelerikNEXT.
Viktor,
No problem. RadRotator is not really a fit. We like the built in progressbar, ability to go full screen and the animation effects of the gallery.It just needs more features to compare to many of the free scrollers out there for jquery.
Some improvements.
-Pause with resume that includes the progressbar.
-Better responsive behavior regarding height and width of content. I am using a jquery re-size plugin to detect changes to the width and then re-size the height but it seems a little flaky. The first image after resize is not always correct. After that it is good.
Thanks, Marty
The developers go through the submitted feature requests so that they could be examined and included in the planning for future releases.
Regarding the resizing issue that you are observing. Could you open a support ticket and submit a sample where the issue is replicated? This will enable us to examine the scenario and look for what could cause the unwanted behavior.
Regards,
Viktor Tachev
Telerik
See What's Next in App Development. Register for TelerikNEXT.