jQuery Cycle - Align images with different dimensions on the right?

Question

I have a slideshow (jquery cycle) that I use for the background of a site. Problem is that I want to align the photos on the right and they have different dimmensions and for some reason the ones who have the smallest widths don't get aligned to the right... I tried to put the img's into divs like on person on the internet suggested and different things but to no avail. Is this possible without editing the plugin?

HTML:

<p class="slideshow">
   <img src="31.jpg" alt="" />
   <img src="35.jpg" alt="" />
   <img src="36.jpg" alt="" />
</p>

CSS:

p.slideshow {
    position:absolute;
    top:0;
    right:0;
    z-index:-999;
    overflow:hidden;
    background: url(images/stripe-bg.png) repeat;
    margin:0;
    padding:0;

    /* without setting the width and height 100% I get the
       annoying scroll bar on the right if photos are big in height */
    /*height:100%;
    width:100%;*/
}

Do you have any clues how to align all of them to the right?

Thank you, Cris

score 2 · Accepted Answer · answered Aug 31 '11 at 15:10

2

I also came across this problem, when I was trying to right-align some content within a container. This solution worked for us:

$('#sltitles span').each(function() {
  $(this).css({right: '0'});
});

You need to run it before the main plugin for it to apply to all content it seems. We ended up with:

<script type="text/javascript">
  $(document).ready(function() {
    $('#sltitles span').each(function() {
      $(this).css({right: '0'});
    });
    $('#sltitles').cycle({
      fx: 'fade'
    });
  });
</script>

Maybe this will help someone else having the same problem.

answered Aug 31 '11 at 15:10

Karl

36
2

This is a cool solution. Thanks! If I wanted to vertically align slideshow images with different dimensions, I would use the same solution only with "margin:0 auto", right? – Cris Sep 02 '11 at 10:25
Why add extra jquery to be processed client-side when you can just do it with css? – squarecandy Dec 30 '13 at 02:47

score 1 · Answer 2 · answered Dec 30 '13 at 02:45

Here's a very simple straight-up css solution that doesn't involve hacking the plugin or a lot of bloated extra jQuery code.

p.slideshow img {
    left: auto !important;
    right: 0 !important;
}

This will also work well for non-image slide items:

div.cycle-slide {
    left: auto !important;
    right: 0 !important;
}

score 1 · Answer 3 · answered Jul 06 '11 at 22:19

1

Cycle plugin uses position absolute for the images, also top: 0; and left: 0;, so you will have to edit the plugin code, because is not part of the options of th eplugin.

Just open the plugin file and search for left:0 and change it to right:0.

You will just have to do it again if you update the plugin.

answered Jul 06 '11 at 22:19

ramono

462
5
16

Don't hack the cycle plugin, there are better ways that will easily withstand upgrading the plugin. – squarecandy Dec 30 '13 at 02:46

score 0 · Answer 4 · answered Jul 06 '11 at 22:06

0

I would try floating the images within a div :

<div class="slideshow">
 <img src="31.jpg" alt="" />
 <img src="35.jpg" alt="" />
 <img src="36.jpg" alt="" />
</div>


div.slideshow {
position:absolute;
top:0;
right:0;
z-index:-999;
overflow:hidden;
background: url(images/stripe-bg.png) repeat;
margin:0;
padding:0;

/* width:;
height:;*/ }



 div.slideshow img { float:right: display:inline}

answered Jul 06 '11 at 22:06

areid

283
2
5
14

Floating the images doesn't work with Cycle since the images are absolutely positioned by the plugin. – ramono Jul 06 '11 at 22:14

jQuery Cycle - Align images with different dimensions on the right?

4 Answers4