Diskuze: Pořadí skriptů v <head>
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Nemam kapacitu na to prochazet celej zdrojak, ale ->
to co popisujes mi nezni jako problem poradi, spis jako problem kolidujicich
implementaci, zkus experimentalne opet nasadit obe ficury a otevrit consoly F12
-> console a kouknout se, jestli treba neco javascript nehlasi za chybu,
nutne nemusi, muze klidne padat tise, ale bylo by fajn tu informaci mit.
kom72:15.7.2017 20:06
tohle vypisuje konsole:
- Uncaught TypeError: $(...).carouFredSel is not a function
at HTMLDocument.<anonymous> (fotografie:29)
at k (jquery-1.8.2.min.js:2)
at Object.fireWith [as resolveWith] (jquery-1.8.2.min.js:2)
at Function.ready (jquery-1.8.2.min.js:2)
at HTMLDocument.D (jquery-1.8.2.min.js:2)
- ajax-loader.gif Failed to load resource: the server responded with a status of 404 (Not Found)
Měl by sis to nějak seskupit k sobě. Nejprv třeba všechny meta tagy, pak CSS, Javascript. U JS nejprv nalinkuj jQuery, pak její rozšíření (jQuery selection) a potom v logickym pořadí další skripty. Navíc knihovnu jQuery načítáš zbytečně X× a pokaždý v jiný verzi.
Zkus něco jako:
<meta name="Description" content="Litvínovský fotograf Jiří Komůrka Vám představuje své převážně krajinářské fotografie." />
<meta name="Author" content="Komůrka Jiří" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:image" content="http://www.jirikomurka.cz/images/fotka_uni_fb.jpg" />
<title>Fotografie | Jiří Komůrka</title>
<link rel="stylesheet" href="css/kom72-layout.css" type="text/css" />
<link rel="stylesheet" href="css/kom72-scripty.css" type="text/css" />
<link rel="stylesheet" href="css/lightbox2.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Final Tiles Grid Gallery CSS -->
<link rel="stylesheet" href="css/finaltilesgallery.css">
<link rel="shortcut icon" href="favicon.ico" >
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.selection.js"></script>
<script src="js/guestbook.js"></script>
<script src="js/jquery.finaltilesgallery.js"></script>
<script src="js/lightbox2.js"></script>
<!-- Script CoolCarousel -->
<script src="js/jquery.carouFredSel-6.2.0-packed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#slider').carouFredSel({
width: '100%',
align: false,
items: 4, // definuj počet zobrazených fotek
items: {
width: $('#wrapper').width() * 0.15,
height: 300,
visible: 1,
minimum: 1
},
scroll: {
items: 1,
timeoutDuration : 10000, // definuj rychlost střídání fotek
onBefore: function(data) {
// find current and next slide
var currentSlide = $('.slide.active', this),
nextSlide = data.items.visible,
_width = $('#wrapper').width();
// resize currentslide to small version
currentSlide.stop().animate({
width: _width * 0.15
});
currentSlide.removeClass( 'active' );
// hide current block
data.items.old.add( data.items.visible ).find( '.slide-block' ).stop().fadeOut();
// animate clicked slide to large size
nextSlide.addClass( 'active' );
nextSlide.stop().animate({
width: _width * 0.7
});
},
onAfter: function(data) {
// show active slide block
data.items.visible.last().find( '.slide-block' ).stop().fadeIn();
}
},
onCreate: function(data){
// clone images for better sliding and insert them dynamacly in slider
var newitems = $('.slide',this).clone( true ),
_width = $('#wrapper').width();
$(this).trigger( 'insertItem', [newitems, newitems.length, false] );
// show images
$('.slide', this).fadeIn();
$('.slide:first-child', this).addClass( 'active' );
$('.slide', this).width( _width * 0.15 );
// enlarge first slide
$('.slide:first-child', this).animate({
width: _width * 0.7
});
// show first title block and hide the rest
$(this).find( '.slide-block' ).hide();
$(this).find( '.slide.active .slide-block' ).stop().fadeIn();
}
});
// Handle click events
$('#slider').children().click(function() {
$('#slider').trigger( 'slideTo', [this] );
});
// Enable code below if you want to support browser resizing
$(window).resize(function(){
var slider = $('#slider'),
_width = $('#wrapper').width();
// show images
slider.find( '.slide' ).width( _width * 0.15 );
// enlarge first slide
slider.find( '.slide.active' ).width( _width * 0.7 );
// update item width config
slider.trigger( 'configuration', ['items.width', _width * 0.15] );
});
});
</script>
<!-- GoogleAnalytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-76336515-1', 'auto');
ga('send', 'pageview');
</script>
<!-- SmartLook - sledování cesty návštěvníka na webu -->
<script type="text/javascript">
window.smartlook||(function(d) {
var o=smartlook=function(){ o.api.push(arguments)},h=d.getElementsByTagName('head')[0];
var c=d.createElement('script');o.api=new Array();c.async=true;c.type='text/javascript';
c.charset='utf-8';c.src='//rec.smartlook.com/recorder.js';h.appendChild(c);
})(document);
smartlook('init', 'e05e3feede2e7de902f5771c4dde8cfe326b3f1d');
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('.final-tiles-gallery').finalTilesGallery({
layout: 'columns',
columns: [
[4000, 4],
[1024, 4],
[800, 3],
[480, 2],
[320, 1]
],
margin: 20
});
});
</script>
+20 Zkušeností
+2,50 Kč
kom72:15.7.2017 21:39
Díky, problém byl s tim nacitanim knihovny Jquery. Stacilo ve scriptu CoolCaousel vyhodit to volani
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
jako jsi to udela ty a je vse ok!
Díky moc!
Zobrazeno 5 zpráv z 5.