Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Адаптивный слайдер (https://javascript.ru/forum/jquery/29628-adaptivnyjj-slajjder.html)

ddale 05.07.2012 18:48

Deff,
В том-то и дело, что я отключил всё что относится к jQuery

Serg_pnz 05.07.2012 19:25

ddale,
пример из 1.11 и для этой версии нет "драйвера", что бы работало в 1.2 и выше.

Тут надо смотреть как подключать http://mootools.net/docs/more/Fx/Fx.Scroll
и тогда нужен еще компонент Fx.Scroll из More (собрать можно тут http://mootools.net/more/)

Deff 06.07.2012 01:57

http://www.magictoolbox.com/magiczoomplus/
Наводить на кроссовку

Serg_pnz 06.07.2012 09:35

Разве такое надо было? Ну тогда у меня тоже есть подобный скрипт (двигать большую схему или прямоугольник в превью) http://trei003.jcase.ru/orgchart/

ddale 06.07.2012 17:48

Deff,
Serg_pnz,
не ребят, не то. но я уже сам всё сделал, спасибо)

Serg_pnz 06.07.2012 18:54

ddale,
хвались)

ddale 06.07.2012 19:46

Serg_pnz,

HTML
<div id="look">

        <div id="pano">
            <img alt="" src="images/content/img_1.jpg" style="">
        </div>

        <div id="next_img"></div>
        <div id="prev_img"></div>

</div>


CSS
#look{

    position:fixed;
    width:100%;
    height:100%;
    overflow:hidden;
}
#pano {
    position: fixed;
    left: 0; top:0;
    width: 100%; height:100%;
    overflow: hidden;
    cursor: none !important;
}
#pano img { height:100%;}


JS
jQuery.preloadImages = function () {
    if (typeof arguments[arguments.length - 1] == 'function') {
        var callback = arguments[arguments.length - 1];
    } else {
        var callback = false;
    }
    if (typeof arguments[0] == 'object') {
        var images = arguments[0];
        var n = images.length;
    } else {
        var images = arguments;
        var n = images.length - 1;
    }
    var not_loaded = n;
    for (var i = 0; i < n; i++) {
        jQuery(new Image()).attr('src', images[i]).load(function() {
            if (--not_loaded < 1 && typeof callback == 'function') {
                callback();
            }
        });
    }
}

var train_width = 0;
var train_timer;
var velocity;
var max_shift = 0;
var x = 0;
var flag = 0;

var train_img = 0;


$.preloadImages(["images/content/img_1.jpg"], function () {
         $("#pano").css({"visibility":"visible"});
		 train_img = $("#pano img").width();
		 $("#pano").css({"width":train_img});
});



//Сдвигаем поезд при каждом обновлении кадра
function move_train()
{
	if (max_shift > 0)
	{	
	

		x = x + velocity;
		
		if (x > 0) x = 0;
		if (x < (-1*(max_shift))) x = -1*(max_shift);
		
		$("#pano").css({"left": x + "px", "width":train_img});
		
		if (velocity > 0)
		{
			
			$("#prev_img").show();
			$("#next_img").hide();
		}
		
		if (velocity == 0)
		{
			$("#next_img").hide();
			$("#prev_img").hide();
		}
				
		if (velocity < 0)
		{
			$("#next_img").show();
			$("#prev_img").hide();
		}
		
	if(x == 0) { $("#prev_img").hide();}
	if(x == "-" + max_shift) { $("#next_img").hide();}
		
	}
}

//Функция находит позицию курсора мыши внутри элемента
function rPosition(element, mouseX, mouseY) {
	var offset = $(element).offset();
	var x = mouseX - offset.left;
	var y = mouseY - offset.top;
	
	return {'x': x, 'y': y};
}

$(function() {
		
	$("#next_img").hide();
	$("#prev_img").hide();
	
  	//Считаем длину поезда, для этого складываем длины всех вагонов 
	train_width = train_width + $("#pano").width();
	train_img = $("#pano img").width();
	
	var controller_width = $("#look").width();
  
  	x = -1*train_width/2 + controller_width/2;
	
	//alert(train_width);
	$("#pano").css({"left": x + "px", "width":train_img});
  
  	//Запускаем цикл анимации если курсор мыши над поездом
  	$("#look").mouseover(function(){
	//alert("");
		train_timer = window.setInterval("move_train();", 10);
	});
	
	//Останавливаем цикл анимации если курсор мыши ушел с поезда
	$("#look").mouseout(function(){
		window.clearInterval(train_timer);
		$("#next_img").hide();
		$("#prev_img").hide();
	});
    
	$(window).resize(function(){
		velocity = 0;
		max_shift = train_width - $("#look").width();
		train_img = $("#pano img").width();
  		move_train();
	});
	
	//Рассчитываем текущую скорость, которая зависит от координаты мышки на поезде
	$("#look").mousemove(function(e){
		train_width = 0;
		train_width = train_width + $("#pano").width();
		//Считаем полудлину поезда, чтобы посчитать скорость, которая с разным знаком в разных половинах поезда
		var half_width = Math.round($(this).width()/2);
		
		var elementCoords = rPosition(this, e.pageX, e.pageY);
		//Пересчитали максимум, на который можно сдвигать поезд, он зависит от размеров окна
		max_shift = train_width - $(this).width();
		
		var sign = velocity;
		
		//Рассчитываем скорость. Делим на 100, чтобы было плавнее. Скорость будет в пределах от 0 до 9
		velocity = Math.round((half_width - elementCoords.x)/100);
	});
});


Такой скрипт работает, если высота больше ширины. Если ширина больше высоты, то для img нужно присваивать width: 100%, а также адаптировать данный скрипт. Скрипт адаптирован. Но есть реальный вопрос.

Необходимо реализовать алгоритм:
1) Получение значений width и height у картинки
2) Сравнение значений
3) width > height - запускам один скрипт, меняем значение width на height у img
4) width < height - запускаем другой скрипт, меняем значение height на width у img

Deff 06.07.2012 20:05

Цитата:

Сообщение от ddale
1) Получение значений width и height у картинки

http://jquery-docs.ru/CSS/width/
http://jquery-docs.ru/CSS/height/
Цитата:

Сообщение от ddale
2) Сравнение значений

http://jquery-docs.ru/CSS/width/#val
http://jquery-docs.ru/CSS/height/#val

ddale 10.07.2012 16:37

Deff,
Есть какая-нибудь готовая замечательная штука, в которой реализован функционал draggable из jQuery UI + простейший слайдер картинок?

Serg_pnz 11.07.2012 00:18

ddale, "хвались" - подразумевалось в действии)))

http://jquery.page2page.ru/index.php...BD%D1%82%D1%8B
там есть замечательная "кнопочка" "Показать код"


Часовой пояс GMT +3, время: 18:24.