Цикл jQuery - выравнивать изображения с различными размерами справа? - PullRequest
Новая
       34

Цикл jQuery - выравнивать изображения с различными размерами справа?

3 голосов
/ 20 июня 2011

У меня есть слайд-шоу (цикл jquery), которое я использую для фона сайта. Проблема в том, что я хочу выровнять фотографии справа, и они имеют разные размеры, и по какой-то причине те, кто имеет наименьшую ширину, не выровнены по правому краю ... Я попытался поместить img в div, как на person в интернете предлагали и разные вещи но безрезультатно. Возможно ли это без редактирования плагина?

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%;*/
}

У вас есть какие-нибудь подсказки, как выровнять их все вправо?

Спасибо , Cris

Ответы [ 4 ]

2 голосов
/ 31 августа 2011

Я также сталкивался с этой проблемой, когда пытался выровнять контент в контейнере по правому краю.Это решение сработало для нас: 

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

Вам нужно запустить его перед основным плагином, чтобы он применился ко всему контенту, который кажется.В итоге мы получили: 

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

Может быть, это поможет кому-то еще с той же проблемой.

1 голос
/ 30 декабря 2013

Вот очень простое решение CSS, которое не требует взлома плагина или большого раздутого дополнительного кода jQuery. 

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

Это также будет хорошо работать со слайдами без изображений: 

div.cycle-slide {
    left: auto !important;
    right: 0 !important;
}
1 голос
/ 07 июля 2011

Плагин Cycle использует абсолютное положение для изображений, а также top: 0; и left: 0;, поэтому вам придется редактировать код плагина, поскольку он не является частью опций th eplugin.

Просто откройтефайл плагина и найдите left:0 и измените его на right:0.

. Вам нужно будет сделать это снова, если вы обновите плагин.

0 голосов
/ 07 июля 2011

Я бы попробовал поместить изображения в 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}
...