Привет, ребята, у меня есть следующий формат 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, когда загрузка страницы будет работать, но после этого для всех последующих изображений он останется таким же. Что делать, чтобы работать аналогично для всех изображений в слайдере.
благодаря
Первое: у вас есть ошибка с вашей разметкой, тег закрытия 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, обратите внимание, как у каждого изображения теперь есть поле вверху: