Hello-
We are implementing a media gallery and are using 2 Rad Rotators on the page, one of 4 images, small thumbnails, and one below of just 1 large image, which will show the details when the user clicks on the image on the top.
We are using the load on demand web service for both rotators, as some of the albums have 100's of images. Everything works fine on the top rotator, clicking next loads the next 10 images from the webservice, etc.
The problem is when the user pages through the small rotator to items 11-20, and clicks on one of the images. The large rotator at this point only has 10 items in it, so using javascript to call set_itemIndex does nothing. Is there a way we can programatically (through javascript ideally) call the webservice to load the next set of items in the bottom rotator?
Thanks
Eric
We are implementing a media gallery and are using 2 Rad Rotators on the page, one of 4 images, small thumbnails, and one below of just 1 large image, which will show the details when the user clicks on the image on the top.
We are using the load on demand web service for both rotators, as some of the albums have 100's of images. Everything works fine on the top rotator, clicking next loads the next 10 images from the webservice, etc.
The problem is when the user pages through the small rotator to items 11-20, and clicks on one of the images. The large rotator at this point only has 10 items in it, so using javascript to call set_itemIndex does nothing. Is there a way we can programatically (through javascript ideally) call the webservice to load the next set of items in the bottom rotator?
Thanks
Eric
4 Answers, 1 is accepted
0
Hi Eric,
You can achieve your desired scenario much easier by adding an HTML img element, which will be used for the detailed view. All you have to do is handle the OnClientItemClicked event of the RadRotator in order to set the path for the detailed image, depending on the currently clicked item. I have implemented this approach into the attached sample project. Note that for the purpose of demonstration I have used the src of the clicked image in the RadRotator in order to set the detailed image, while you can specify a new directory to a detailed version of the image. Please use the provided sample as a reference for incorporating the feature into your actual project.
In case the second RadRotator is used for other purposes as well and you aren't able to remove it, please specify the exact functionality it implements so that we can suggest an according solution.
Regards,
Slav
the Telerik team
You can achieve your desired scenario much easier by adding an HTML img element, which will be used for the detailed view. All you have to do is handle the OnClientItemClicked event of the RadRotator in order to set the path for the detailed image, depending on the currently clicked item. I have implemented this approach into the attached sample project. Note that for the purpose of demonstration I have used the src of the clicked image in the RadRotator in order to set the detailed image, while you can specify a new directory to a detailed version of the image. Please use the provided sample as a reference for incorporating the feature into your actual project.
In case the second RadRotator is used for other purposes as well and you aren't able to remove it, please specify the exact functionality it implements so that we can suggest an according solution.
Regards,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Eric
Top achievements
Rank 1
Rank 1
answered on 03 Nov 2011, 04:28 PM
Hi Slav-
We have considered doing this, however it does not work for our business needs.
The idea behind the 2 rotators is that the user can page through the top rotator (seeing 4 images at a time), and when they click on one of the images, the large image shows that. The use case that you provided works great for that. However, we also want the user to be able to click through the large rotator. So when they click through the large rotator, the top rotator moves with the bottom one, so each time they click through the bottom one, the image on the top is highlighted.
We have lots of customized javascript for communication between the rotators (more or less setting the item index of the rotator that was not clicked), and it works fine. Moving to the loading of images on demand breaks this javascript, as the image index requested is not there.
So in theory, the top rotator might need to be called to get more images as well, if the user pages through 10 images on the bottom, the top will need to be called to retrieve the next set of 10 images, as the bottom one will work properly.
So, is there any way to on demand call the webservice to load the next 10 images? I assume there must be some hidden/undocumented function that the next button click inside the rotator is doing that we could hijack/use.
Thanks
Eric
We have considered doing this, however it does not work for our business needs.
The idea behind the 2 rotators is that the user can page through the top rotator (seeing 4 images at a time), and when they click on one of the images, the large image shows that. The use case that you provided works great for that. However, we also want the user to be able to click through the large rotator. So when they click through the large rotator, the top rotator moves with the bottom one, so each time they click through the bottom one, the image on the top is highlighted.
We have lots of customized javascript for communication between the rotators (more or less setting the item index of the rotator that was not clicked), and it works fine. Moving to the loading of images on demand breaks this javascript, as the image index requested is not there.
So in theory, the top rotator might need to be called to get more images as well, if the user pages through 10 images on the bottom, the top will need to be called to retrieve the next set of 10 images, as the bottom one will work properly.
So, is there any way to on demand call the webservice to load the next 10 images? I assume there must be some hidden/undocumented function that the next button click inside the rotator is doing that we could hijack/use.
Thanks
Eric
0
Accepted
Hi Eric,
The method you could use to force loading items is _loadChildrenFromWebService(index). In addition, there was a js error which is now fixed. I included an override for it in the sample page as well as a show case of the usage of the items load method. Please, remove the override once you upgrade to the next official version of RadControls.
Kind regards,
Svetlina Anati
the Telerik team
The method you could use to force loading items is _loadChildrenFromWebService(index). In addition, there was a js error which is now fixed. I included an override for it in the sample page as well as a show case of the usage of the items load method. Please, remove the override once you upgrade to the next official version of RadControls.
Kind regards,
Svetlina Anati
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Eric
Top achievements
Rank 1
Rank 1
answered on 08 Nov 2011, 08:11 PM
That function worked perfectly. So now I can control loading more items from either rotator, I am using the OnClientItemsRequested function to capture the number of items in each rotator, and if they are different to call the appropriate web service to update the other rotator. Thanks for the help.
Eric
Eric