PDA

Zobacz pełną wersję : Problem z przeładowywaniem zdjęć/biblioteka jquery



balboa
21-12-2011, 21:42
Pomagam znajomemu projektować stronę www, fifcio.eu. jest tam banner, który przeładowuje 3 zdjęcia, chciałbym zeby między nimi nie było "odstępu" migania. Posiadam 2 biblioteki jquery, s3SliderPacked.js, i s3Slider.js. Czy moze wiecie jak to zrobić ?

palyga007
21-12-2011, 21:47
zazwyczaj jest parametr, w ktorymś z plików js ktory odpowiada za takie przejście. Tam trzeba zmienić jego wartość.

balboa
21-12-2011, 21:50
s3Slider.js:

(function($){

$.fn.s3Slider = function(vars) {

var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items[i]).mouseover(function() {
mOver = true;
});

$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});

});

var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}

var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}

makeSlider();

};

})(jQuery);


s3SliderPacked.js
(function($){$.fn.s3Slider=function(vars){var element=this;var timeOut=(vars.timeOut!=undefined)?vars.timeOut:100 0;var current=null;var timeOutFn=null;var faderStat=true;var mOver=false;var items=$("#"+element[0].id+"Content ."+element[0].id+"Image");var itemsSpan=$("#"+element[0].id+"Content ."+element[0].id+"Image span");items.each(function(i){$(items[i]).mouseover(function(){mOver=true});$(items[i]).mouseout(function(){mOver=false;fadeElement(true )})});var fadeElement=function(isMouseOut){var thisTimeOut=(isMouseOut)?(timeOut/2):timeOut;thisTimeOut=(faderStat)?10:thisTimeOut; if(items.length>0){timeOutFn=setTimeout(makeSlider,thisTimeOut)}el se{console.log("Poof..")}}var makeSlider=function(){current=(current!=null)?curr ent:items[(items.length-1)];var currNo=jQuery.inArray(current,items)+1 currNo=(currNo==items.length)?0:(currNo-1);var newMargin=$(element).width()*currNo;if(faderStat== true){if(!mOver){$(items[currNo]).fadeIn((timeOut/6),function(){if($(itemsSpan[currNo]).css('bottom')==0){$(itemsSpan[currNo]).slideUp((timeOut/6),function(){faderStat=false;current=items[currNo];if(!mOver){fadeElement(false)}})}else{$(itemsSpan[currNo]).slideDown((timeOut/6),function(){faderStat=false;current=items[currNo];if(!mOver){fadeElement(false)}})}})}}else{if(!mOv er){if($(itemsSpan[currNo]).css('bottom')==0){$(itemsSpan[currNo]).slideDown((timeOut/6),function(){$(items[currNo]).fadeOut((timeOut/6),function(){faderStat=true;current=items[(currNo+1)];if(!mOver){fadeElement(false)}})})}else{$(itemsSp an[currNo]).slideUp((timeOut/6),function(){$(items[currNo]).fadeOut((timeOut/6),function(){faderStat=true;current=items[(currNo+1)];if(!mOver){fadeElement(false)}})})}}}}makeSlider( )}})(jQuery);


który

palyga007
21-12-2011, 21:57
Ile czasu poświęciłeś na samodzielne rozwiązanie tego problemu?
3 minuty?
To chyba sobie kolega żarty robi.

PS: Kod wrzucamy pomiędzy specjalnie do tego celu przystosowane znaczniki.

balboa
21-12-2011, 21:59
Wielkim cudem udało mi sie zeby banner sie wyswietlał i migał robie go juz ok 2 dni. Jesli chodzi co o parametr o czsie 4000 to jest jak szybko miga - to mi przychodzi na myśl, ale ja chce zeby nie było widoczne przejscie między obrazami.

palyga007
21-12-2011, 22:02
Strona jest wyłączona, a ja nie wiem co autor ma na myśli

balboa
21-12-2011, 22:06
już nie

palyga007
21-12-2011, 22:12
Jeśli tam ma być tylko 1 zdjęcie to po prostu wstaw tam plik graficzny bez slidera.
Jeśli tam ma być slider to przejście zawsze się przydaje

I szczerze...
Znajdź jakiś darmowy szablon w sieci bo strach na to patrzeć. Skoro już pomagasz to rób to porządnie.
szablon tworzony w artisterze?..

Zwracam honor ktoś to "cudo" stworzył już wcześniej:hmm::lol:

balboa
21-12-2011, 22:14
ale ja niechce przejscia. masz patent jak to wykasować ?

palyga007
21-12-2011, 22:18
pokombinuj z timeOut

Chociaż zupełnie nie rozumiem twojego toku myślenia i wizji tego "niby" slidera

balboa
21-12-2011, 22:21
Znasz sie na tym ?, timeout służy do szybkości migania, a nie do czasu przejścia.

palyga007
21-12-2011, 22:34
a próbowałeś modyfikować czy ciągle czekasz na gotowca?

balboa
21-12-2011, 22:36
tak próbowałem, inaczej bym Ci nie napisał, konbinowałem jak się da ale lipa. Wiec napisałem na forum

palyga007
21-12-2011, 22:38
link gdzie można pobrać moduł zerknę w wolnej chwili
I jak ma działać wynikowo zamiana zdjęć?
mamy pierwsze i nagle znikąd pojawia się drugie?

balboa
21-12-2011, 22:44
ma działać tak:
sa tam 3 identyczne zdjęcia ale różnią się opisem w chmurkach, chciałbym zeby nie było widac samego przejścia zdjęć ale zmianę tekstu w chmurkach. Ewentualnie mogę podesłać ci 2 pliki js, jużnie pamiętamm gdzie to znalazłem. Ale zaraz poszukam.

neo_fox
21-12-2011, 22:51
3 minuty?

No na napisanie PN do mnie dodatkowe 5

balboa
21-12-2011, 22:53
Po co pisać tak od czapy ? .....nie rozumiem,
Poprosiłem o Pomoc.. ale.

Dzięki za pomoc.

palyga007
21-12-2011, 23:04
To dobrze, że chcesz komuś pomóc.

Po pierwsze nie piszemy od czapy.
Po drugie skoro pytasz na forum to po co dodatkowo rozsyłasz PW.
Po trzecie nie do końca masz rację, z tym że timeout steruje tylko czasem migania, ponieważ jest też wykorzystywany jako parametr w funkcji fadeOut.

balboa
21-12-2011, 23:34
to jest ta biblioteka
http://www.visual-blast.com/javascript/s3slider-jquery-image-gallery-plugin/

palyga007
21-12-2011, 23:39
prześlij .zip szablonu na palyga007[at]gmail.com