MonoX support board

Start the conversation, ask questions and share tips and solutions with fellow developers.

Non-registered users can only browse through our support boards. Please register now if you want to post your questions. It takes a second and it is completely free. Alternatively, you can log in without registration using your credentials at major sites such as Google, Microsoft Live, OpenId, Facebook, LinkedIn or Yahoo.

MonoX SlideShow  (Mono Support )

Viewed 11769 time(s), 3 post(s) 3/11/2013 9:26:45 PMby darryljneil
darryljneil

darryljneil

3/11/2013 10:53:24 PM
I am struggling to correct an issue regarding the MonoX SlideShow object. It seems I'm not editing the stylesheet correctly or am possibly not covering all areas where styles are affecting the SlideShow. I've been editing the Default.css file, specifically the section labeled "Slideshow".
The problems I am experiencing are in enlarging the images in the SlideShow and having them centered, as well as correctly placing the "Prev" and "Next" labels in the SlideShow. I've attached an image displaying what the SlideShow looks like for me right now. You'll notice that the "Next" label is off to the far right of the image. You'll also notice that the image is not as wide as the blue-ish background. Are they specific CSS tags that set each individual label (Next and Prev), or are these bound together? Any help is appreciated.

I'd also like to know if there is a way to add a caption to each SlideShowItem.

Thanks,
Darryl
This content has not been rated yet. 
207 Reputation 23 Total posts
ivanb

ivanb

3/12/2013 9:47:26 AM
Hi Darrylneil,
main problem here lays in responsive grid, because slider container and "prev" and "next" handlers will set up according to layout grid. On default MonoX grid is set like this:

<div class="container">
     <div class="row-fluid">
            <div class="span6">Here lays text boxes on left side.</div>
            <div class="span6">Here lays slider.</div>
      </div>
</div>
So if you are changing the size of your slider you should first set layout grid. For example, this is the way you can set up one column (full width) grid:

<div class="container">
     <div class="row-fluid">
            <div class="span12">Here goes the slider.</div>
      </div>
</div>
After that, slider container and "prev" and "next" handlers will set them self to the grid. Right now you shuld set css rule .slides .slide { .. } width  to desirable amount. In my example it would be 1170px. Also, you should set your .slides {..} and .slides_container {..} rules height to desirable amount. In my example it would be 500px.

Next, you will have to go to layout.css file to find again those rules from above, and set new values for width and height according to screen size of devices. Note that in layout.css you have steps for different device screen sizes. That means you will have to calculate your width and height for each step.

More about responsive layouts and behaviors you can find here.

According to adding caption issue, basically this slideshow plugin don't support caption, but you can go to SlideShow.ascx and use <%# Eval("Title") %> tag and setup proper markup for displaying caption. It will demand a lot of custom work, but that can solve your problem.

Simulating this I have found a little bug on slider shadow image. To fix that you should go to SlideShow.ascx and add class .slider-shadow to shadow image beside class scale-with-grid (now you should have class="scale-with-grid slider-shadow"). Also you should go to Default.css file and add this rule somewhere inside:

.slider-shadow
{
    width: 100%;
}
This will be fixed in next NightlyBuild of MonoX. SlideShow control will be updated also very soon with all this issues from above fixed and simplified, so I'm thanking you for patience in advanced.

Hope this will help,
Ivan
Rated 5.00, 1 vote(s). 
459 Reputation 55 Total posts
darryljneil

darryljneil

3/12/2013 3:16:30 PM
Thank you Ivan for the detailed reply to my question!
This content has not been rated yet. 
207 Reputation 23 Total posts