What would be a good approach to allow for rich content editing for each slide, basically want to have a dynamic amount of slides depending on images in a folder that will be a background image for the slide. Then each slide needs to have a layer of rich content that can be edited per slide.
Can i create slides (server side) per images in folder and inside the slide dynamically create a radeditor that has the image as background and store the content in my database and make sure i pause the slide on mouseover (when editor is in edit mode) to allow for editing. or is there any better approach to this? anyone done something similar?
5 Answers, 1 is accepted
I would define the ItemTemplate of the rotator as needed to show the content beautifully and set the PauseOnMouseOver property to true.
I would then use the ItemClick event to add/show a RadEditor on the page where the user can change the content and click a Save button to store the data to the location where the rotator data source reads.
Or, the client-side OnClientItemClicked event and show a popup with the editor and corresponding data. You can even toggle a CSS class on the item that shows/hides the editor if you had defined it in the ItemTemplate.
Telerik by Progress
I'm sold on your idea and decided to use the OnClientItemClicked event to display a editor, really appreciate the suggestion.
However, I'm facing difficulties with the rotator to simply make it responsive with a div and background image set as background-size:cover.
No matter what i do I'm either getting very small items when debugging the internal rrItem class, or it wont cover the entiry width (not expanding width of image above image size, which cover should do).
i can get it working without using the rotator as a static image using the same container, so its something to do with the internal class that overrides what i want to accomplish.
i have a datasource with a few images (all the same size of 2560x410) and the following code,
I want to get each item (and content div) to cover the whole width of the screen which may sound simple enough but im just lost..
If i look at the rendered source i can see that the rrItemsList has a width of 70px(?), if i set this to 100% each rrItem is still limited to 70px unless i add width 100% to each rrItem class but then it looses its positioning and each item gets aligned vertically and the flow between each slide is wrong. hope this explains my issues better.
Rotator items have width in pixels. The rotator itself may get 100% width, but this has some requirements and limitations as described in the documentation: http://docs.telerik.com/devtools/aspnet-ajax/controls/rotator/mobile-support/fluid-capabilities.
I suggest you take a look at the ImageGallery control to see if it will fit your needs: http://demos.telerik.com/aspnet-ajax/image-gallery/examples/overview/defaultcs.aspx. It also offers templates if you need more complex content: http://demos.telerik.com/aspnet-ajax/image-gallery/examples/functionality/templates/defaultcs.aspx.
Here is a basic example:
You can use a template, add a data-* attribute from the data source with the needed info to the clickable element in order to show additional text/controls/popups and know which one it is.
Telerik by Progress
100% width not working well when page is inside masterpage.
got 3 images in my rotator, each has a width of 900px. if I set my width to 100%, may page will have a horizontal scroll bar and when you slide it will show all 3 images. I'm guessing my body content page with becomes 2700px.
Any workaround for rotator with masterpage using 100% width?
Thanks in advance!