kilka znaczników <script>, Po wklejeniu kilku tagów <script> przestaje działać rozwijane m Opcje

[WhiteAngel]

Witam!

Od kilku godzin borykam się z problemem na stronie www. Otóż, posiadam na swojej witrynie rozwijane menu oraz slider. Chciałbym stronę wzbogacić o wtyczkę colorbox.

W takiej specyfikacji wszystko działa:

CODE

<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="../css/style.css">
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../js/superfish.js"></script>
<script src=.."../js/jquery.easing.1.3.js"></script>
<script src="../js/tms-0.4.1.js"></script>
<script src="../js/slider.js"></script>

natomiast w takiej już nie:

CODE

<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="../css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../js/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});

$('.non-retina').colorbox({rel:'group5', transition:'none'})
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../js/superfish.js"></script>
<script src=.."../js/jquery.easing.1.3.js"></script>
<script src="../js/tms-0.4.1.js"></script>
<script src="../js/slider.js"></script>

Zauważyłem jednak pewną sposobność. Otóż po usunięciu linijki:

CODE

<script src="../js/jquery-1.7.1.min.js"></script>

colorbox reaguje natomiast przestaje mi działać rozwijane menu. Adres strony to www.nurkowanie.pila.pl/galeria/filmy.html

Ten post edytował WhiteAngel 25.08.2013, 21:26:43

[kamil4u]

Daj to:

Kod

<script>
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});

$('.non-retina').colorbox({rel:'group5', transition:'none'})
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>

Pod wszystkimi <script> i powinno być ok.

[WhiteAngel]

Mam teraz taki kod:

CODE

<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="../css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../js/jquery.colorbox.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../js/superfish.js"></script>
<script src=.."../js/jquery.easing.1.3.js"></script>
<script src="../js/tms-0.4.1.js"></script>
<script src="../js/slider.js"></script><script>
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});

$('.non-retina').colorbox({rel:'group5', transition:'none'})
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>

Film po kliknięciu linku wyświetla sie ale na pełnym ekranie czyli nie działa wtyczka jak należy. Powinna wczytać mi filmik na przyciemnionym tle coś na zasadzie lightboxa. No chyba, ze coś źle robię...

[Olsz4k]

Jedna zasada. Skrypty wewnętrzne zawsze na końcu dokumentu.

Poza tym definiuj script type.

Ten post edytował Olsz4k 25.08.2013, 22:03:10

[WhiteAngel]

Nie jestem jakąś Alfa i Omegą w te klocki więc jeśli mogę Cię prosić napisz jaśniej albo pokaż palcem

Ten post edytował WhiteAngel 25.08.2013, 22:05:45

[Olsz4k]

Kod

<script>
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});

$('.non-retina').colorbox({rel:'group5', transition:'none'})
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>

Przerzuć na koniec dokumentu, przed znacznik zamykający </body>

<script type='text/javascript' ścieżka>

Dorzucaj type do skryptów, ale to raczej nie rozwiąże Twojego problemu, to rada na przyszłość.

[WhiteAngel]

Zrobiłem jak kazano i faktycznie nic nie wniosło nowego Poza tym, że wiem coś nowego Tak czy inaczej dzięki i nadal czekam na Kogoś kto jest w stanie mi pomóc.

Udało się

Usunąłem jedną linijkę:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Reszta kodu wygląda tak:

CODE

<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/superfish.js"></script>
<script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../js/tms-0.4.1.js"></script>
<script type="text/javascript" src="../js/slider.js"></script>
<script type="text/javascript" src="../js/jquery.colorbox.js"></script>

zauważyłem, że się pojawiła dwa razy chyba to był cały problem...

Teraz tylko pozostaje mi zabawa ze stylami Dzięki za pomoc!

[WiruSSS]

<script type='text/javascript' ścieżka>

Dorzucaj type do skryptów, ale to raczej nie rozwiąże Twojego problemu, to rada na przyszłość.

Poza tym definiuj script type.

...a nie wypadało by najpierw zapytać czy czasem kolega nie ma zdeklarowanego html5 gdzie to jest całkowicie zbędne?

Ten post edytował WiruSSS 27.08.2013, 00:32:02

[Olsz4k]

Nie ma, wystarczyło spojrzeć w link który wrzucił.

[WiruSSS]

...a przepraszam, nie zauważyłem linku