NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
kom72
Člen
Avatar
kom72:15.7.2017 16:04

Ahoj, lze někde online zkontrolovat správné pořadí scriptů. které mám nebo volám v <head> webu? Případně neomrknul by mi někdo moje stránky. Přidal jsem si na webnovou fotogalerii a nemůžu jí skloubit se stávajícím scriptem CoolCarousel. Bud funguje ten a nebo nefunguje fotogalerie.
V současnosti jsem nechal fungovat fotogaleri a nefunguje slider Mé oblíbené fotografie a script s odkazy na jiné stránky. Myslel jsem si, že bych seskupil v hlavičce např. volaní css, volaní js a pak scripty, ale to se mi to už úplně rozhodilo. Budu rád za vše rady a pomoc.

Nyní mám v<head> vloženo toto:

<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" />

<!-- Questbook -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="js/jquery.selection.js"></script>
        <script src="js/guestbook.js"></script>

<link rel="stylesheet" href="css/kom72-layout.css" type="text/css" />
<link rel="stylesheet" href="css/kom72-scripty.css" type="text/css" />

<link rel="shortcut icon" href="favicon.ico" >

<title>Fotografie | Jiří Komůrka</title>

<meta property="og:image" content="http://www.jirikomurka.cz/images/fotka_uni_fb.jpg" />

<!-- Script CoolCarousel -->
                <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
                <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>

<!-- FOTOGALERIE - Final Tiler Grid Gallery -->
<!-- FontAwesome CSS for cool icons -->
                <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">

<!-- Include jQuery only if it is not already present in your code -->
                <script src="js/jquery-1.11.1.min.js"></script>

<!-- Final Tiles Grid Gallery script -->
    <script src="js/jquery.finaltilesgallery.js"></script>

          <script src="js/lightbox2.js"></script>
                <link rel="stylesheet" href="css/lightbox2.css">

<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>
 
Odpovědět
15.7.2017 16:04
Avatar
Neaktivní uživatel:15.7.2017 18:22

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.

Nahoru Odpovědět
15.7.2017 18:22
Neaktivní uživatelský účet
Avatar
kom72
Člen
Avatar
Odpovídá na Neaktivní uživatel
kom72:15.7.2017 20:06

tohle vypisuje konsole:

  1. Uncaught TypeError: $(...).carouFredSel is not a function

    at HTMLDocument.<a­nonymous> (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)

  2. ajax-loader.gif Failed to load resource: the server responded with a status of 404 (Not Found)
 
Nahoru Odpovědět
15.7.2017 20:06
Avatar
David Klouček:15.7.2017 20:46

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>
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
15.7.2017 20:46
Avatar
kom72
Člen
Avatar
Odpovídá na David Klouček
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!

 
Nahoru Odpovědět
15.7.2017 21:39
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.