Как добавить верхнее поле для изображения в слайдере

Question

Как добавить верхнее поле для изображения в слайдере

0

Привет, ребята, у меня есть следующий формат div для слайдера изображения

<div class="callbacks_container">
<ul id="slider1" class="rslides"> 
<li id="transparent-btns1_s0" class="fluidratio transparent-btns1_on" style="display: block; float: left; position: relative; opacity: 1; z-index: 2; transition: opacity 500ms ease-in-out 0s;">
<div id="bg">
<img class="thumb" >
</div>
</li></ul</div>

и у меня есть следующий css для выше

.callbacks_container {
    float: left;
    position: relative;
    width: 100%;
}

.rslides {
    list-style: none outside none;
    margin: auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100%;
}

и сценарий JQuery похож на этот

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script defer src="http://wstation.inmomundo.com/static01/scripts/responsiveslides.min.js"></script>
<script>

$(window).load(function() {

var h = $('.rslides ').find('img').outerHeight(true);
if( h<290)
{
  var m = 290-h;
      m = m/2;
$('.thumb').css('margin-top', +m + "px");
}
$("#slider1").responsiveSlides({

        auto: false,
        pager: true,
        nav: true,
        speed: 500,
        maxwidth: 540,
        namespace: "transparent-btns"
      });
      });

</script>

Моя проблема в том, что я добавил скрипт, чтобы проверить высоту изображения, а затем добавить верхний марж соответственно. это работает только для первого изображения слайдера я mea, когда загрузка страницы будет работать, но после этого для всех последующих изображений он останется таким же. Что делать, чтобы работать аналогично для всех изображений в слайдере.

благодаря

Vikram 28 апр. 2014, в 08:49

Источник

1

Пожалуйста, включите JSFIDDLE
Quinn 28 апр. 2014, в 06:43

Теги:

javascript

jquery

html

image

slider

1 ответ

Ещё вопросы

Chris Spittles · Accepted Answer · 2014-04-28T05-18-00.000Z

Первое: у вас есть ошибка с вашей разметкой, тег закрытия UL неверен.

Вам нужно перебирать каждый палец и индивидуально обрабатывать высоту и разницу, подобную этой:

$(window).load(function() {

    var images = $('.rslides ').find('img');

    images.each(function(){ // jQuery each loops over a jQuery obj

        var h = $(this).outerHeight(true); // $(this) is the current image
        if( h<290)
        {
          var m = 290-h;
              m = m/2;
          $(this).css('margin-top', +m + "px");
        }

    });

    $("#slider1").responsiveSlides({

            auto: false,
            pager: true,
            nav: true,
            speed: 500,
            maxwidth: 540,
            namespace: "transparent-btns"
    });
});

Здесь JSFiddle, обратите внимание, как у каждого изображения теперь есть поле вверху:

http://jsfiddle.net/chrissp26/9JLxE/

Он отлично работает в вашем JSfiddle, но когда я применил в моем слайдере. поле подходит для всех изображений, даже если оператор if () имеет значение false. Я новичок в JQuery и сценарии, так что мне трудно это исправить. Если первое изображение ползунка больше, чем 290 пикселей, оно отлично работает без отступа, но если другие изображения больше, чем 290, оно также создает для них поле.
Я не уверен, что предложить, если скрипка работает, но ваш код не работает?