Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript
Перезагрузить страницу

Слайдер на плагине Slidorion


Слайдер на плагине Slidorion

Обсуждение темы Слайдер на плагине Slidorion в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; хм. вначале когда загрузишь - не прокручивается...а когда нажмешь прокурчивается Добавлено через 1 минуту хотя нет ..... что ж делать то- вроде так ...


Закрытая тема
Страница 3 из 4 < 12 3 4 >
 
Опции темы
Старый 04.11.2011, 20:30   #21
хм. вначале когда загрузишь - не прокручивается...а когда нажмешь прокурчивается

Добавлено через 1 минуту

хотя нет .....
что ж делать то- вроде так делал
в скрипте
slidorion: function(options) {
var defaults = {
autoPlay: false,
easing: '',
effect: 'fade',
first: "section1",
interval: 7000,
hoverPause: true,
speed: 1000
};

так в странице
<script>
$(document).ready(function() {
$('#slidorion').slidorion({
autoPlay: false,
easing: '',
effect: 'fade',
first: "section1",
interval: 2000,
hoverPause: true,
speed: 500
});
});
</script>
Последний раз редактировалось maxefect; 04.11.2011 в 20:30.. Причина: Добавлено сообщение
 
Старый 04.11.2011, 20:30
Ссылки
Старый 04.11.2011, 20:34   #22
с вашего сайта
Код HTML:
/*
* Slidorion, An Image Slider and Accordion Combined
* Intructions: http://www.slidorion.com
* Created by Ben Holland - http://www.ben-holland.co.uk/blog/
* Version: 0.9
* Copyright 2011 Ben Holland <[email protected]>
* Dual licensed under the MIT and GPL licenses.
* http://www.slidorion.com/license.html
*/
(function($){
	$.fn.extend({
		slidorion: function(options) {
			var defaults = {
				autoPlay: true,
				easing: '',
				effect: 'fade',
				first: "section1",
				interval: 7000,
				hoverPause: false,
				speed: 1000
			};
			
			var options = $.extend(defaults, options);
			
			return this.each(function() {
				
				var o = options;
				var current = o.first;
				var section = "";
				var speed = o.speed;
				var effect = o.effect;
				var easingOption = o.easing;
				var interval = o.interval;
				var hoverPause = o.hoverPause;
				var autoPlay = o.autoPlay;
				var zPos = 1;
				var slideCount = $('#slider .slider-image').size();
				var accordCount = $('#accordion .slider-link').size();
				var intervalPause = false;
				var stopAutoPlay = false;
				var effects = new Array('fade','slideLeft','slideUp','slideRight','slideDown','overLeft','overRight','overUp','overDown');
				var previousEffect = '';
				
				if(slideCount==accordCount){
					
					if(autoPlay==true){
						var autoPlaying = setInterval(function(){playSlider(current, effect, speed, easingOption);}, interval);
					}
					
					var obj = $(this);
					var items = $(".slider-link", obj);
					$('#accordion .content').hide();
					$('#accordion .header a[rel="'+current+'"]').addClass('active').parent().next().show();
					$('.slider-image').css({'opacity':'0'});
					$('.slider-image[rel="'+current+'"]').css({'opacity':'1', 'z-index':zPos});
					
					items.click(sectionClicked);
					
					//$(window).mouseover(offScreen);
					
					if(hoverPause==true){
						$('#slidorion').hover(function(){
							clearInterval(autoPlaying);
						},function(){
							autoPlaying = setInterval(function(){playSlider(current, effect, speed, easingOption);}, interval);
						});
					}
										
					function animation(current, section, effect, speed, easingOption){
						changeAutoPlay();
						var imgWidth = $('.slider-image[rel="'+current+'"] img').outerWidth();
						var imgHeight = $('.slider-image[rel="'+current+'"] img').outerHeight();
						$current = $('.slider-image[rel="'+current+'"]');
						$new = $('.slider-image[rel="'+section+'"]');
						switch(effect){
							case 'fade':
								$current.stop().animate({opacity:'0'}, {queue:false, duration:speed, easing:easingOption});
								$new.css({'z-index':zPos}).stop().animate({opacity:'1'}, {queue:false, duration:speed, easing:easingOption});
								break;
							case 'slideLeft':
								$new.css({'left':imgWidth,'opacity':'1'});
								$current.animate({'left':'-='+imgWidth,'top':'0','opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
								$new.animate({'left':'-='+imgWidth,'top':'0','opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
								break;
							case 'slideRight':
								$new.css({'left':'-'+imgWidth+'px','opacity':'1'});
								$current.animate({'left':'+='+imgWidth,'top':'0','opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
								$new.animate({'left':'+='+imgWidth,'top':'0','opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
								break;
							case 'slideUp':
								$new.css({'top':imgHeight,'opacity':'1'});
								$current.animate({'top':'-='+imgHeight,'left':'0','opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
								$new.animate({'top':'-='+imgHeight,'left':'0','opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
								break;
							case 'slideDown':
								$new.css({'top':'-'+imgHeight+'px','opacity':'1'});
								$current.animate({'top':'+='+imgHeight,'left':'0','opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
								$new.animate({'top':'+='+imgHeight,'left':'0','opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
								break;
							case 'overLeft':
								$new.css({'left':imgWidth,'top':'0','opacity':'1','z-index':zPos});
								$new.animate({'left':'-='+imgWidth,'top':'0','opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
								break;
							case 'overRight':
								$new.css({'left':'-'+imgWidth+'px','top':'0','opacity':'1','z-index':zPos});
								$new.animate({'left':'+='+imgWidth,'top':'0','opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
								break;
							case 'overUp':
								$new.css({'top':imgHeight,'left':'0','opacity':'1','z-index':zPos});
								$new.animate({'top':'-='+imgHeight,'left':'0','opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
								break;
							case 'overDown':
								$new.css({'top':'-'+imgHeight+'px','left':'0','opacity':'1','z-index':zPos});
								$new.animate({'top':'+='+imgHeight,'left':'0','opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
								break;
							case 'random':
								var randNum = Math.floor(Math.random()*9);
								effect = effects[randNum];
								while(effect==previousEffect){
									randNum = Math.floor(Math.random()*9);
									effect = effects[randNum];
								}
								console.log(effect);
								previousEffect = effect;
								animation(current, section, effect, speed, easingOption);
								break;
						}
					}
				}else{
					console.log("The number of slider images does not match the number of accordion sections.");
				}
				
				function sectionClicked(){
					$objHeader = $(this);
					section = $(this).attr('rel');
					if(section==current){
						return false;
					}else{
						if($objHeader.parent().next().is(':hidden')) {
							$('.active').removeClass('active').parent().next().slideUp();
							$objHeader.addClass('active').parent().next().slideDown();
						}
						animation(current, section, effect, speed, easingOption);
					}
					zPos++;
					current = section;
					return false;
				}
				
				function playSlider(current, effect, speed, easingOption){
					if(stopAutoPlay==false){
						var slideNum = current.substr(current.length - 1);
						slideNum++;
						if(slideNum==slideCount+1){
							$('.slider-link[rel="section1"]').trigger('click', sectionClicked);
						}else{
							section = "section"+slideNum;
							$('.slider-link[rel="'+section+'"]').trigger('click', sectionClicked);
						}
					}
				}
				
				function changeAutoPlay(){
					stopAutoPlay = true;
					setTimeout(function(){
						stopAutoPlay = false;
					},interval);
				}
				
				function offScreen(){
					$slidorion = $('#slidorion');
					var position = $slidorion.position();
					var t = $(window).scrollTop();
					var h = position.top;
					if(t > h){
						console.log("stopped");
						clearInterval(autoPlaying);
						stopAutoPlay = true;
					}else{
						console.log("started");
						stopAutoPlay = false;
					}
				}

			});
		}
	});
	
	//function setActive(){
		//active = true;
	//}
})(jQuery);
вот что нужно изменить

* Slidorion, An Image Slider and Accordion Combined
* Intructions: http://www.slidorion.com
* Created by Ben Holland - http://www.ben-holland.co.uk/blog/
* Version: 0.9
* Copyright 2011 Ben Holland <[email protected]>
* Dual licensed under the MIT and GPL licenses.
* http://www.slidorion.com/license.html
*/
(function($){
$.fn.extend({
slidorion: function(options) {
var defaults = {
autoPlay: true,
easing: '',
effect: 'fade',
first: "section1",
interval: 7000,
hoverPause: false,
speed: 1000
};

var options = $.extend(defaults, options);

return this.each(function() {

var o = options;
var current = o.first;
var section = "";
var speed = o.speed;
var effect = o.effect;
var easingOption = o.easing;
var interval = o.interval;
var hoverPause = o.hoverPause;
var autoPlay = o.autoPlay;
var zPos = 1;
var slideCount = $('#slider .slider-image').size();
var accordCount = $('#accordion .slider-link').size();
var intervalPause = true;
var stopAutoPlay = false;
var effects = new Array('fade','slideLeft','slideUp','slideRight','s lideDown','overLeft','overRight','overUp','overDow n');
var previousEffect = '';

if(slideCount==accordCount){

if(autoPlay==true){
var autoPlaying = setInterval(function(){playSlider(current, effect, speed, easingOption);}, interval);
}

var obj = $(this);
var items = $(".slider-link", obj);
$('#accordion .content').hide();
$('#accordion .header a[rel="'+current+'"]').addClass('active').parent().next().show();
$('.slider-image').css({'opacity':'0'});
$('.slider-image[rel="'+current+'"]').css({'opacity':'1', 'z-index':zPos});

items.click(sectionClicked);

//$(window).mouseover(offScreen);

if(hoverPause==true){
$('#slidorion').hover(function(){
clearInterval(autoPlaying);
},function(){
autoPlaying = setInterval(function(){playSlider(current, effect, speed, easingOption);}, interval);
});
}

function animation(current, section, effect, speed, easingOption){
changeAutoPlay();
var imgWidth = $('.slider-image[rel="'+current+'"] img').outerWidth();
var imgHeight = $('.slider-image[rel="'+current+'"] img').outerHeight();
$current = $('.slider-image[rel="'+current+'"]');
$new = $('.slider-image[rel="'+section+'"]');
switch(effect){
case 'fade':
$current.stop().animate({opacity:'0'}, {queue:false, duration:speed, easing:easingOption});
$new.css({'z-index':zPos}).stop().animate({opacity:'1'}, {queue:false, duration:speed, easing:easingOption});
break;
case 'slideLeft':
$new.css({'left':imgWidth,'opacity':'1'});
$current.animate({'left':'-='+imgWidth,'top':'0','opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
$new.animate({'left':'-='+imgWidth,'top':'0','opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
break;
case 'slideRight':
$new.css({'left':'-'+imgWidth+'px','opacity':'1'});
$current.animate({'left':'+='+imgWidth,'top':'0',' opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
$new.animate({'left':'+='+imgWidth,'top':'0','opac ity':'1'}, {queue:true, duration:speed, easing:easingOption});
break;
case 'slideUp':
$new.css({'top':imgHeight,'opacity':'1'});
$current.animate({'top':'-='+imgHeight,'left':'0','opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
$new.animate({'top':'-='+imgHeight,'left':'0','opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
break;
case 'slideDown':
$new.css({'top':'-'+imgHeight+'px','opacity':'1'});
$current.animate({'top':'+='+imgHeight,'left':'0', 'opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
$new.animate({'top':'+='+imgHeight,'left':'0','opa city':'1'}, {queue:true, duration:speed, easing:easingOption});
break;
case 'overLeft':
$new.css({'left':imgWidth,'top':'0','opacity':'1', 'z-index':zPos});
$new.animate({'left':'-='+imgWidth,'top':'0','opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
break;
case 'overRight':
$new.css({'left':'-'+imgWidth+'px','top':'0','opacity':'1','z-index':zPos});
$new.animate({'left':'+='+imgWidth,'top':'0','opac ity':'1'}, {queue:true, duration:speed, easing:easingOption});
break;
case 'overUp':
$new.css({'top':imgHeight,'left':'0','opacity':'1' ,'z-index':zPos});
$new.animate({'top':'-='+imgHeight,'left':'0','opacity':'1'}, {queue:true, duration:speed, easing:easingOption});
break;
case 'overDown':
$new.css({'top':'-'+imgHeight+'px','left':'0','opacity':'1','z-index':zPos});
$new.animate({'top':'+='+imgHeight,'left':'0','opa city':'1'}, {queue:true, duration:speed, easing:easingOption});
break;
case 'random':
var randNum = Math.floor(Math.random()*9);
effect = effects[randNum];
while(effect==previousEffect){
randNum = Math.floor(Math.random()*9);
effect = effects[randNum];
}
console.log(effect);
previousEffect = effect;
animation(current, section, effect, speed, easingOption);
break;
}
}
}else{
console.log("The number of slider images does not match the number of accordion sections.");
}

function sectionClicked(){
$objHeader = $(this);
section = $(this).attr('rel');
if(section==current){
return false;
}else{
if($objHeader.parent().next().is(':hidden')) {
$('.active').removeClass('active').parent().next() .slideUp();
$objHeader.addClass('active').parent().next().slid eDown();
}
animation(current, section, effect, speed, easingOption);
}
zPos++;
current = section;
return false;
}

function playSlider(current, effect, speed, easingOption){
if(stopAutoPlay==false){
var slideNum = current.substr(current.length - 1);
slideNum++;
if(slideNum==slideCount+1){
$('.slider-link[rel="section1"]').trigger('click', sectionClicked);
}else{
section = "section"+slideNum;
$('.slider-link[rel="'+section+'"]').trigger('click', sectionClicked);
}
}
}

function changeAutoPlay(){
stopAutoPlay = true;
setTimeout(function(){
stopAutoPlay = false;
},interval);
}

function offScreen(){
$slidorion = $('#slidorion');
var position = $slidorion.position();
var t = $(window).scrollTop();
var h = position.top;
if(t > h){
console.log("stopped");
clearInterval(autoPlaying);
stopAutoPlay = true;
}else{
console.log("started");
stopAutoPlay = false;
}
}

});
}
});

//function setActive(){
//active = true;
//}
})(jQuery);
 
Старый 04.11.2011, 20:39   #23
отдельный пример работает!
я ставил true - и отправлял на сервер... в браузерах смотрел стоит true


slidorion: function(options) {
var defaults = {
autoPlay: false,
easing: '',
effect: 'fade',
first: "section1",
interval: 7000,
hoverPause: true,
speed: 1000
};



return this.each(function() {

var o = options;
var current = o.first;
var section = "";
var speed = o.speed;
var effect = o.effect;
var easingOption = o.easing;
var interval = o.interval;
var hoverPause = o.hoverPause;
var autoPlay = o.autoPlay;
var zPos = 1;
var slideCount = $('#slider .slider-image').size();
var accordCount = $('#accordion .slider-link').size();
var intervalPause = true;
 
Старый 04.11.2011, 20:43   #24
Цитата:
отдельный пример работает!
если работает, то возможно какой то конфликт с одним из множества скриптов
как вариант: убрать все скрипты и собрать постепенно страницу, поставив слайдер и убедившись в его работе, дополнить оставшимися скриптами.
 
Старый 04.11.2011, 20:47   #25
Все теперь работает

Добавлено через 2 минуты

Явно что то не менял в скрипте - я взял ваш пример - и заменил на странице код
Последний раз редактировалось maxefect; 04.11.2011 в 20:47.. Причина: Добавлено сообщение
 
Старый 04.11.2011, 20:47   #26
Цитата:
Все теперь работает
что сделали?
 
Старый 04.11.2011, 20:48   #27
Большое спасибо за помощь)


Кстати будут комментарии по сайту?
Может опять что то не так реализовал
 
Старый 04.11.2011, 21:01   #28
maxefect,

Цитата:
Сообщение от Niemans Посмотреть сообщение
что сделали?
?
 
Старый 04.11.2011, 21:04   #29
Цитата:
Сообщение от vitaly-go Посмотреть сообщение
maxefect,



?
Явно что то не менял в скрипте - я взял ваш пример - и заменил на странице код
 
Старый 04.11.2011, 21:05   #30
Цитата:
что то не менял в скрипте
кто?
 
Старый 04.11.2011, 21:05
Закрытая тема
Страница 3 из 4 < 12 3 4 >

« Не могу изменить размер шрифта в списке | Простые вопросы (Dreamweaver 8) »



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Слайдер с градиентным затемнением по краям lifeact HTML, CSS, JavaScript 8 14.11.2013 11:40
Слайдер strall ASP, Perl, PHP и MySQL 1 24.01.2013 09:17
слайдер для сайта на Xhtml .Михаил. HTML, CSS, JavaScript 4 29.02.2012 19:56
IE не показывает слайдер - тогда PHP maxefect ASP, Perl, PHP и MySQL 2 25.12.2011 23:19
Подскажите, как вставить слайдер в страницу сайта? buzulee HTML, CSS, JavaScript 7 21.06.2011 07:26


Текущее время: 03:12. Часовой пояс GMT +4.



Справка - Обратная связь - Web-silver.ru - Архив - Календарь - Карта - Вверх

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум