This query has come about from the fact that i dont believe you can scroll - using the Rotator Buttons - by one Rotator Item at a time (http://www.telerik.com/community/forums/aspnet-ajax/rotator/scrolling-1-item.aspx)
this is my code so far
now, the amount of images that need to be shown could be 7,8,9 or anything else.
my RadRotator Width has been set so that it fits 4 images at any point in its scrolling:
e.g. the RadRotator is 350px in Width.
the inidividual items in the RadRotator are 75px in Width
This means that 75 * 4 is 300 (+ an extra 40px for the Buttons - as per this page: http://www.telerik.com/help/aspnet-ajax/rotator-configuration.html
and an extra 10px for the extra border width i have added to the Style).
unfortunately, this means that if the amount of images is 5, the first page will show 4 images fine, but when i scroll using the Rotator scroll button, the next screen is of 1 image and an empty space that could accomodate another 3 images.
i suppose i have 3 solutions that i would be keen to see if exists.
1. that it is possible to scroll one image at a time so that it doesn't show the empty space
2. dynamically add the necessary amount of 'placeholder' images so that it doesn't have the empty space (e.g if amount of images is less than the next multiple of 4, add the required amount of 'placeholders' to get it to be the next multiple of 4).
3. some other means of showing that the blank space is by design and not looking like there should be images.
thanks.
this is my code so far
<
telerik:RadRotator
Width
=
"350px"
Height
=
"75px"
ItemHeight
=
"75px"
ItemWidth
=
"75px"
CssClass
=
"horizontalRotator"
WrapFrames
=
"false"
ScrollDuration
=
"500"
RotatorType
=
"Buttons"
runat
=
"server"
ID
=
"imageRotator"
>
<
ItemTemplate
>
<
img
id
=
"imgCarousel2"
class
=
"item"
width
=
"75"
height
=
"75"
class
=
"item"
src
=
"<%#Eval("
PhotoFile")%>"alt="" onclick="ChangeRecipePhoto('<%#Eval("PhotoFile")%>','<%#Eval("PhotoID")%>')" />
</
ItemTemplate
>
</
telerik:RadRotator
>
imageRotator.DataSource = Photos()
imageRotator.DataBind()
<style type=
"text/css"
>
.item {
border
:
solid
10px
#fff
;
margin
:
1px
;
}
</style>
now, the amount of images that need to be shown could be 7,8,9 or anything else.
my RadRotator Width has been set so that it fits 4 images at any point in its scrolling:
e.g. the RadRotator is 350px in Width.
the inidividual items in the RadRotator are 75px in Width
This means that 75 * 4 is 300 (+ an extra 40px for the Buttons - as per this page: http://www.telerik.com/help/aspnet-ajax/rotator-configuration.html
and an extra 10px for the extra border width i have added to the Style).
unfortunately, this means that if the amount of images is 5, the first page will show 4 images fine, but when i scroll using the Rotator scroll button, the next screen is of 1 image and an empty space that could accomodate another 3 images.
i suppose i have 3 solutions that i would be keen to see if exists.
1. that it is possible to scroll one image at a time so that it doesn't show the empty space
2. dynamically add the necessary amount of 'placeholder' images so that it doesn't have the empty space (e.g if amount of images is less than the next multiple of 4, add the required amount of 'placeholders' to get it to be the next multiple of 4).
3. some other means of showing that the blank space is by design and not looking like there should be images.
thanks.