Опит за галерия с iQuery (проблеми)

[misho]

Искам да си направя галерия с два бутона - нялаво и надясно и около 10 снимки, от които само 3 да се виждат. Идеята ми е да направя един div с рзмерите на това, което трябва да се вижда (т.е. той да е нещо като прозорец), а в него друг div, с по-голяма ширина - там ще са снимките. Ще движа вътрешния наляво-надясно. Въпросът обаче как да направя този вътрешен div, така че това, което не се побира в рамките на външния да не се вижда. Каквото опитах, все се виждаше.

 

[hpstuff]

Като на външния div сложиш overflow: hidden;

 

[slideR]

Аз знам начин само с чист javascript.
Правя си един див с id примерно gal и още един gal2. Сега внимавай - в gal слагаш картинките, който ще се виждат, а в gal2, които няма да се виждат.
и слагаш този javascript

function slide() {
var slider = document.getElementById("gal").style.display;
var slider2 = document.getElementById("gal2").style.display;
if(slider=="block") {
document.getElementById("gal2").style.display='block';
document.getElementById("gal").style.display='none';
} else if(slider=="none") {
document.getElementById("gal").style.display='block';
document.getElementById("gal2").style.display='none';
}
}
function previous() {
var slider = document.getElementById("gal").style.display;
var slider2 = document.getElementById("gal2").style.display;
if(slider=="block") {
document.getElementById("gal").style.display='none';
document.getElementById("gal2").style.display='block';
} else if(slider=="none") {
document.getElementById("gal2").style.display='none';
document.getElementById("gal").style.display='block';
}
}

Не забравяй на дивът gal да сложиш style="display: block;", а на gal2 слагаш style="display: none;". Това е :?:

 

[misho]

Като на външния div сложиш overflow: hidden;

Мерси много! Аз мислих, че е само за скриване на скролерите.

slideR, по-късно ще пробвам и твоя код, но сега се запънах на jQuery-то и не мога да разбера защо не работи. Ето и кода ми:

<script type="text/javascript" src="gallery/jquery-1.4.2.js"></script>
<script type="text/javascript">
	$('#leftArrow').click(function() {
		$('.scrollingGalleryBoxContent').animate({"margin-left" : "-=50px"}, "slow");
	});
</script>

....

<img src="img/leftarrow.png" class="arrow" id="leftArrow" align="left" alt="" />
<img src="img/rightarrow.png" class="arrow" id="rightArrow" align="right" alt="" />
<div class="scrollingGalleryBox">
 <div class="scrollingGalleryBoxContent">
  <img src="img/1.png" class="galleryImg" alt="" />
  <img src="img/2.png" class="galleryImg" alt="" />
  <img src="img/3.png" class="galleryImg" alt="" />
  <img src="img/4.png" class="galleryImg" alt="" />
 </div>
</div>

Просто нищо не става. :lol:

 

[F1r3Fl3x]

В обикновения джаваскрипт и в jQuery css атрибутите се пишат с CamelCase. ПРи теб проблема идва от там, че си написал margin-left,а трябва да е marginLeft

 

[misho]

И защо продължава да не работи? :idea:

 

[shterev]

$('.scrollingGalleryBoxContent').animate({"margin-left" : "-=50px"}, "slow");

Това равенсто мисля , че е излишно.

 

[d3xter]

Ето ти направо готова, която е идеални и е точно това, което търсиш:

http://flowplayer.org/tools/demos/scrollable/index.html

 

[misho]

Ето ти направо готова, която е идеални и е точно това, което търсиш:

http://flowplayer.org/tools/demos/scrollable/index.html

Благодря много! Идеална е. :?:

И пак остава въпраса защо това, което опитах аз не работи. :lol: shterev, ако съм разбрал правилно, това е равно е, за да извадя 50px от настоящата стойност. Т.е., при второто кликане тя ще е -50 и ще стане -100, а без равното ще си остане на -50.

 

[shterev]

Аз не съм нещо съгласен, че по този начин ще ти събира и ще слага отрицателен знак

 

[misho]

Гледах от тук примера със синьото квадратче. Но явно бъркам нещо друго, защото не става никаква анимация. Пробвах да сменя рамката от 1 на 10 пиксела, пробвах всякакви стойност и не става. Проверих файла - там си е. Изнервям се вече. :x

 

[shterev]

$('.scrollingGalleryBoxContent').animate({marginLeft : '-=50' + 'px'}, "slow");

Пробвай това.

 

[misho]

Имам малък напредък. проблема е в click() - не работи. Направих го да пуска анимацията, когато документа се зареди и всичко е ОК. Защо обаче click() не раоти, не знам. Пробвах и да дам име на функцията, а на картинката директно да пиша onClick - не и не. Пробвах и да го направя да се клика на някой div, не на картинка, пак не става.

 

[hpstuff]

За анимацията е точно така както казва @misho трябва да има "=" ,а това дали пишеш margin-left или marginLeft няма значение при jQuery ,a колкото до това защо не ти работи като цяло идеята е главния контеинер да му зададеш

 position:relative; overflow: hidden;

на вътрешния който ще местиш

position: absolute; width: 10000px(много голяма зада събере елементите в него);

След това скрипта трябва да ти е нещо такова.

$('movableContainer').animate({left : '-=50px'},slow);

Но това е нещо много семпло трябва да има проверки като стигне до края на непродължава или като стигне до началото , ако местиш примерно 3 елемента както ти изкаш при случаи че останат само 2 напрая да ти отести толкова колкото са останали и така мн по сложно е от колкото изглежда затова ти препоръчвам ползваи някои готов колкото и да не са хубаво написани вършат работа.

 

[F1r3Fl3x]

Номера е следният. Трбява да си сложиш кода в:

$(document).ready(function(){
// кода
});

Това е така, защото, когато добавяш onCLick евента s jQuery, елемента #leftArrow все още не съществува, браузърът не го е рендирал. С горния код се обозначава, да се изпълни функцията когато зареди целият DOM на страницата

 

[misho]

Грешка. :lol:

 

[misho]

Благодаря ви много! Вече работи.
Въпросите обаче не свършват. Как да предотвратя изпълнението на каквото и да било, преди всички други процеси да са приключили? stop() не ми върши работа, защото искам, не да спирам настоящите, а да не изпълнявам нищо друго, докато те не свършат.

 

[F1r3Fl3x]

Обясни по-подробно какви са другите неща, които искаш да изпълниш. Можеш да използваш callback функции, ако това което правиш има такива.. или може да е доста по-сложно. Трябва ни повечко информация

 

[misho]

В крайна сметка, това на което се спрях е малко по-различно от първоначалния замисъл. Имам 3 снимки, които се виждат. Когато искаш да се придвижиш към следващата, първата изчезва с fadeOut, втората и третата се придвижват на освободилото се място и в края се появява новата с fadeIn. Това си работи, но става неприятно, ако натиснеш стрелката за следващата снимка няколко пъти много бъро - изтриват се снимките. Всъщност когато я натисна веднъж, започва да се изпълнява fadeOut и ако я натисна пак, преди да е свършил и преди да е дошъл реда на fadeIn, процеса започва отново да следващата снимка. Така само си изтриват снимки, без да се покажат другите.
Как да предотвратя изпълнението на каквито и да било други процеси, преди активните да са приклучили?
Ето и кода:

$(function() {
	var allPics = 12; // броя на снимките (първите три от тях ще се виждат по подразбиране)
	pics = allPics - 3;
	var imgLeftCurrent = 1;
	var imgRightCurrent = 3;
	while (allPics > 3) {
		picId  = '#img-' + allPics;
		$(picId).css('display', 'none');
		allPics--;
	}
	
	$('#leftArrow').click(function() {
		if(imgLeftCurrent < pics) {
			imgRightCurrent++;
			imgRightCurrentId = '#img-' + imgRightCurrent;
			imgLeftCurrentId = '#img-' + imgLeftCurrent;
			$(imgLeftCurrentId).fadeOut(900, function() {
				$(imgRightCurrentId).fadeIn(900);
			});
			imgLeftCurrent++;
			$(this).fadeOut(300, function() {
				$(this).fadeIn(300);
			});
		}
		else {
			$(this).fadeOut(50, function() {
				$(this).fadeIn(50, function() {
					$(this).fadeOut(50, function() {
						$(this).fadeIn(50);
					});
				});
			});
		}
	});
	
	$('#rightArrow').click(function() {
		if(imgLeftCurrent > 1 && imgRightCurrent > 3) {
			imgLeftCurrent--;
			imgRightCurrentId = '#img-' + imgRightCurrent;
			imgLeftCurrentId = '#img-' + imgLeftCurrent;
			$(imgRightCurrentId).fadeOut(900, function() {
				$(imgLeftCurrentId).fadeIn(900);
			});
			imgRightCurrent--;
			$(this).fadeOut(200, function() {
				$(this).fadeIn(200);
			});
		}
		else {
			$(this).fadeOut(50, function() {
				$(this).fadeIn(50, function() {
					$(this).fadeOut(50, function() {
						$(this).fadeIn(50);
					});
				});
			});
		}
	});
});

 

[F1r3Fl3x]

Начина, който ти предлагам е следният:
Когато цъкнеш на линк да заредиш следваща или предишна снимка, променливата animating, се задава true. В началото на onClicK евентите на двата бутона, за ляво и дясно, се проверява дали animating е true. Ако е вярно, няма да се изпълни функцията, ако е false, ще се изпълни. След това добавих callback функция на последните анимации във onClick евентите да задават animating да е false

$(function() {
   var allPics = 12; // броя на снимките (първите три от тях ще се виждат по подразбиране)
   pics = allPics - 3;
   var imgLeftCurrent = 1;
   var imgRightCurrent = 3;
   var animating = false; // Индикатор за анимациите :)
   
   while (allPics > 3) {
      picId  = '#img-' + allPics;
      $(picId).css('display', 'none');
      allPics--;
   }
   
   $('#leftArrow').click(function() {
   
	   if( animating == true)
          return false;

	  animating = true;

      if(imgLeftCurrent < pics) {
         imgRightCurrent++;
         imgRightCurrentId = '#img-' + imgRightCurrent;
         imgLeftCurrentId = '#img-' + imgLeftCurrent;
         $(imgLeftCurrentId).fadeOut(900, function() {
            $(imgRightCurrentId).fadeIn(900);
         });
         imgLeftCurrent++;
         $(this).fadeOut(300, function() {
            $(this).fadeIn(300, function(){ animating = false; });
         });
      }
      else {
         $(this).fadeOut(50, function() {
            $(this).fadeIn(50, function() {
               $(this).fadeOut(50, function() {
                  $(this).fadeIn(50, function(){ animating = false; });
               });
            });
         });
      }
   });
   
   $('#rightArrow').click(function() {

      if( animating == true)
          return false;
          
   	  animating = true;

      if(imgLeftCurrent > 1 && imgRightCurrent > 3) {
         imgLeftCurrent--;
         imgRightCurrentId = '#img-' + imgRightCurrent;
         imgLeftCurrentId = '#img-' + imgLeftCurrent;
         $(imgRightCurrentId).fadeOut(900, function() {
            $(imgLeftCurrentId).fadeIn(900);
         });
         imgRightCurrent--;
         $(this).fadeOut(200, function() {
            $(this).fadeIn(200, function(){ animating = false; } );
         });
      }
      else {
         $(this).fadeOut(50, function() {
            $(this).fadeIn(50, function() {
               $(this).fadeOut(50, function() {
                  $(this).fadeIn(50, function(){ animating = false; } );
               });
            });
         });
      }
   });
});