Как может я изменять размер изображения для установки области Изображением:: Magick?

Прежде чем проверять примеры, вы должны знать две функции jQuery, которые я использовал чаще всего.

index () возвращает значение - целое число, указывающее позицию первого элемента в объекте jQuery относительно его родственных элементов.

eq () выбирает элемент на основе его положения (значения индекса).

Обычно я беру выбранный триггерный элемент index value и сопоставляю это значение на изображениях с помощью метода eq.

- Эффект FadeIn / FadeOut .

- Эффект скольжения .

- альтернативный ответ мыши .

html sample:

   

      
   
   

      
   
   ...



   
1
   
2
   ...

Prev
Next

ЭФФЕКТ ОТКРЫТИЯ: jsFiddle.

трюк css: перекрывающиеся изображения с положением: абсолютное

ul.images { position:relative; }
  ul.images li { position:absolute; }

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;

triggers.first().addClass('active');
images.hide().first().show();

function sliderResponse(target) {
    images.fadeOut(300).eq(target).fadeIn(300);
    triggers.removeClass('active').eq(target).addClass('active');
}

Эффект скольжения: jsFiddle.

трюк css: с двойной оберткой и использованием в качестве маски дочернего элемента

.mask { float:left; margin:40px; width:270px; height:266px; overflow:hidden;  }
    ul.images { position:relative; top:0px;left:0px; }
    /* this width must be total of the images, it comes from jquery */
        ul.images li { float:left; }

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var mask = $('.mask ul.images');
var imgWidth = images.width();

triggers.first().addClass('active');
mask.css('width', imgWidth*(lastElem+1) +'px');

function sliderResponse(target) {
    mask.stop(true,false).animate({'left':'-'+ imgWidth*target +'px'},300);
    triggers.removeClass('active').eq(target).addClass('active');
}

Общий ответ jQuery для обоих слайдеров:

( вызывает + следующий / предыдущий клик и время )

triggers.click(function() {
    if ( !$(this).hasClass('active') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});

$('.next').click(function() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});

function sliderTiming() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}

var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },5000);
}