-2

On redesign out web site we wanted to add the slick js carousel function on the homepage. Followed the instructions to the slick javasriprt website http://kenwheeler.github.io/slick/ but it does not gate activated and on the firefox debuger console it says that " $ is not a function".

The other javascripts that are one page are running corectly so something I am doing wrong but I can not find what

The header code is as follows :

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title><?php ui::title(); ?></title>

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/ie6.css" /><![endif]-->
<!-- <?php if (is_home() ) {?><style type="text/css">#sidebar { margin-top: -310px; } #middle  /style> <?php } ?> -->
<?php if (option::get('sidebar_pos') == 'Left') { ?><style type="text/css">#sidebar { float:left; } #middle { float:right;} </style> <?php } ?>

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,greek' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&appId=640072772742184&version=v2.0";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>

<?php wp_head(); ?>

    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="/wp-content/themes/zenko/functions/user/stepcarousel.js"></script>
     </head>
       <div id="header">
           <div id="logo">
               <?php if (!option::get('misc_logo_path')) { echo "<h1>"; } ?>

               <a href="<?php echo home_url(); ?>" title="<?php bloginfo('description'); ?>">
            <?php if (!option::get('misc_logo_path')) { bloginfo('name'); } else { ?>
                <img src="<?php echo ui::logo(); ?>" alt="<?php bloginfo('name'); ?>" />
            <?php } ?>
        </a>

          <?php if (!option::get('misc_logo_path')) { echo '</h1><p id="tagline">' . get_bloginfo('description') . '</p>'; } ?>
    </div>

    <?php if (option::get('ad_head_select') == 'on') { ?>
        <div id="ad468">

            <?php if ( option::get('ad_head_code') <> "") { 
                echo stripslashes(option::get('ad_head_code'));             
            } else { ?>
                <a href="<?php echo option::get('banner_top_url'); ?>"><img src="<?php echo option::get('banner_top'); ?>" alt="<?php echo option::get('banner_top_alt'); ?>" /></a>
            <?php } ?>          

        </div><!-- /.adv -->
    <?php } ?>

    <div class="clear"></div>

</div>

<div id="menu">
    <div id="menu-wrap">
        <?php if (has_nav_menu( 'primary' )) { 
            wp_nav_menu(array(
            'container' => 'menu',
            'container_class' => '',
            'menu_class' => 'dropdown',
            'menu_id' => 'mainmenu',
            'sort_column' => 'menu_order',
            'theme_location' => 'primary'
            ));
        }                   
        else
            {
                echo '<p>Please set your Top navigation menu on the <strong><a href="'.get_admin_url().'nav-menus.php">Appearance > Menus</a></strong> page.</p>
             ';
            }
        ?>

        <?php if (option::get('rss_icon') == 'on') { ?>
            <div id="rss_icon">
                 <a href="<?php ui::rss(); ?>"><?php echo option::get('rss_label'); ?></a> 
            </div>
        <?php } ?>




    </div> <!-- /#menu-wrap -->

</div> <!-- /#menu -->

  <div>







    <div id="content-wrap">

        <div id="content">

<table id="t02" style="border:#CCCCCC;">
   <tr>
 <td id="d03" ></td>
    <td id="d03" style="width:900px;padding: 0px 0px 4px 1px;">
 <script>
   (function() {
         var cx = '012395885834974803252:tjozqtaiwbi';
           var gcse = document.createElement('script');
        gcse.type = 'text/javascript';
        gcse.async = true;
       gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
         '//cse.google.com/cse.js?cx=' + cx;
     var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);   })();
   </script>
    <gcse:search></gcse:search>
    </td>
         <td id="d03" ></td>
     </tr>
    </table>
      <script type="text/javascript">
    //<![CDATA[
       var $j = jQuery.noConflict();
        $j(window).load(function(){
        // use $j for jquery functions
      });
      //]]> 
</script>

and the main code is as follows:

    <?php get_header(); ?>
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; // gets current page number ?>

<?php if (is_home() && $paged < 2 && option::get('featured_enable') == 'on' ) { get_template_part('wpzoom-slider'); } // Featured Slideshow ?>


<?php
// php code quering the posts and echoing them
?>

<table id="t01" >
    <tr>
        <td id="d01" style="width:888px;padding: 0px 0px 4px 1px; background:#DAADAE0;"><?php jnewsticker_display( 0 ) ?> </td>
        <td id="d02" style="padding-top: 0px; padding-left: 0px;"><a href="http://news.creativeopinions.org" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=900');return false;"  ><img src="http://creativeopinions.org/wp-content/uploads/2015/11/Macro-Flash-news-icon1.jpg" ></a></td>
    </tr>
</table>

<script type="text/javascript">

stepcarousel.setup({
    galleryid: 'mygallery_a', //id of carousel DIV
    beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
    panelclass: 'panel', //class of panel DIVs each holding content
    autostep: {enable:false, moveby:2, pause:7000},
    panelbehavior: {speed:600, wraparound:true, wrapbehavior:'slide', persist:false},
    defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://creativeopinions.org/wp-content/uploads/2015/05/arrowl.gif', -20, 150], rightnav: ['http://creativeopinions.org/wp-content/uploads/2015/05/arrowr.gif', 0, 150]},
    statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

</script>

<div id="mygallery_a" class="stepcarousel">
    <div class="belt">
<?php
// php code to query the posts for the step carousel 
?>

</div>
</div>
<div style="clear:both"></div>

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{font-family:Arial, sans-serif;font-size:14px;border-style:none;border-width:0px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;border-style:none;border-width:0px;overflow:hidden;word-break:normal;background: none repeat scroll 0% 0%;}
</style>
<table class="tg">
<tr>
    <th class="tg-031e" style="width: 360px; ">
    1/3 third collum
    </th>
    <th class="tg-031e" style="width: 300px; ">
    2/3 Third Column
    <h3 style="background: transparent url(&quot;http://creativeopinions.org/wp-content/themes/zenko/images/black.png&quot;) no-repeat scroll left top; color: white;" class="title">ΟΙ ΕΙΔΗΣΕΙΣ ΜΟΥ</h3>
    <style> .feed-item {padding: 5px 0px 0px 5px;background: transparent url("http://www.analyst.gr/wp-content/uploads/2015/11/bullet.gif") no-repeat scroll 0px 12px; border-bottom: 1px solid #CCC;} #ajax_text-2 { background: #F0F0F0 none repeat scroll 0% 0%;}
    .wprss-feed-meta > span:not(:last-child):after {content: ' | ';}  li.feed-item { margin-bottom: 10px;} .wprss-feed-meta > span {font-size: 90%;clear: both;}</style>
<div style="overflow:auto;height:300px;">
<?php
$args = array(
    'before_widget' => '', 
    'after_widget' => '',
    'before_title' => '',
    'after_title' => ''
    );
$instance = array(
    'title' => '',
    'text' => '[wp-rss-aggregator]'
    );
the_widget( 'AJAX_Text_Widget', $instance, $args );
?>  
</div>
<br>
</th>
    <th class="tg-031e" style="width: 300px; ">
    3/3 Third Column
        <h3 style="background: transparent url(&quot;http://creativeopinions.org/wp-content/themes/zenko/images/black.png&quot;) no-repeat scroll left top; color: white;" class="title">ΑΓΟΡΕΣ</h3>
    </th>
</tr>
</table>

<style type="text/css">
.stepcarouselb{position: relative; /*leave this value alone*/margin-left:auto;margin-right:auto;border: 1px solid #0c98d3;overflow: scroll; /*leave this value alone*/width: 890px; /*Width of Carousel Viewer itself*/height: 90px; /*Height should enough to fit largest content's height*/-webkit-box-sizing: border-box; /* set box model so container width and height value includes any padding/border defined */-moz-box-sizing: border-box;box-sizing: border-box;}

.stepcarouselb .belt{position: absolute; /*leave this value alone*/left: 0;top: 0;}

.stepcarouselb .panelb{float: left; /*leave this value alone*/overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/margin: 15px; /*margin around each panel*/width: 130px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */}

span.paginatecircle{ /* CSS for paginate circle spans. Required */background: white;border: 2px solid black;border-radius: 10px;width: 6px;height: 6px;cursor: pointer;display: inline-block;margin-right: 4px;}

span.paginatecircle:hover{background: gray;}

span.paginatecircle.selected{background: black;}

</style>

<script type="text/javascript">

stepcarousel.setup({
    galleryid: 'mygalleryb', //id of carousel DIV
    beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
    panelclass: 'panelb', //class of panel DIVs each holding content
    autostep: {enable:true, moveby:1, pause:3000},
    panelbehavior: {speed:1500, wraparound:false, wrapbehavior:'slide', persist:false},
    defaultbuttons: {enable: false, moveby: 1, leftnav: ['http://marketnews.gr/images/arrowl.gif', -20, 100], rightnav: ['http://marketnews.gr/images/arrowr.gif', 0, 100]},
    statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

</script>


<div id="mygalleryb" class="stepcarouselb">
    <div class="belt">
<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-wines-anagnostou-03/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/ANAGNOSTOU-logo-570x321.png" /></a></div>

<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-drinks-athenian-brewery/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/AZ_LOGO_gr_gb_3BRANDS-08-570x321.png" /></a></div>

<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-wines-cavino-02/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/CAVINO-Logo2-570x321.png" /></a></div>

<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-wines-gerovassiliou-05/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/GEROVASSILIOU-Logo-GR-570x321.png" /></a></div>

<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-wines-kirgianni-02/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/KYRGIANNI-LogoFeb13-570x321.png" /></a></div>

<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-wines-lafazani-05/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/LAFAZANIS-Logo-GR.png" /></a></div>

<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-wines-papagiannakou-02/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/PAPAGIANNAKOS-Logo-GR3-570x321.png" /></a></div>

<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-wines-semeli-02/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/SEMELI-Logo-cropped-570x321.png" /></a></div>

<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-wines-skouras-02/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/SKOURAS-logo-570x321.png" /></a></div>

<div class="panelb"><a href="http://expohellas.analyst.gr/hall/b-wines-tsantali-02/" target="_blank"><img src="http://www.analyst.gr/wp-content/uploads/2015/11/TSANTALI-logo1-570x321.png" /></a></div>

</div>
</div>


<div id="middle">
    <?php if(is_home() && $paged < 2) { ?>
        <?php if (function_exists('dynamic_sidebar')) { dynamic_sidebar('Homepage'); } ?>
        <div class="clear"></div>
    <?php } ?>

</div><!-- /#middle -->
<?php get_sidebar(); ?>

<?php get_footer(); ?>

and finaly the footer

<?php } ?>
</div> <!-- /#content-wrap -->

<div id="footer">

<div class="footer-wrap">

    <div id="fside">

    </div>

</div> <!-- /#footer-wrap-->

<div class="clear"></div>      

<div id="copyright">

    <div class="footer-wrap">

    </div> <!-- /#footer-wrap-->

</div>

</div> <!-- /#footer -->

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<?php wp_footer(); ?> 

<?php if (option::get('featured_enable') == 'on' && $paged < 2 && is_home() ) { ui::js("jtools");  ?>

<script type="text/javascript">
var jq = jQuery.noConflict(true);
(function($) {
jq(".pagination").tabs(".slides li", {
    event: 'mouseover', 
    effect: 'fade',
    rotate: true
        }).slideshow({
            clickable: false,
            autoplay:  <?php if (option::get('featured_rotate') == 'on') { echo "true"; } else { echo "false"; } ?>, 
            interval: <?php echo option::get('featured_interval'); ?> 
        });

    jq("#slider iframe").each(function(){
    var ifr_source = jq(this).attr('src');
    var wmode = "?wmode=transparent";
    jq(this).attr('src',ifr_source+wmode);
});

});
})(jQuery);
</script>
<?php } ?>

<!--Start Cookie Script--> <script type="text/javascript" charset="UTF-8" src="http://chs03.cookie-script.com/s/00d482fb3a2cee25653ca3afd78479be.js"></script> <!--End Cookie Script-->

<script type="text/javascript">
$(document).ready(function(){
    $('.best').slick({
        slidesToShow: 3,
        slidesToScroll: 3,
        autoplay: true
    });
        });
</script>

</body>
</html>

Can you help me finding the error in the code

  • This is no WordPress relevant question and it might probably get closed as off-topic. Please ask JavaScript/jQuery-questions over at stackoverflow.com. – flomei Feb 2 '16 at 14:55
  • Have you already searched this site? Your error is quite common. If you found a solution, please flag your question as duplicate of the helpful one. – kaiser Feb 2 '16 at 15:09
0

I actually just wanted to make a comment but..(reputation is too low) so doing it this way.

If for some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict( true ) from the second version will return the globally scoped jQuery variables to those of the first version.

So to solve your 'issue' (if I am correct) the solution could be to put jQuery into the noConflict mode.

Click the link and read to see if my answer is correct and will solve your problem (by handing you the correct way for 'how to do/use'). jQuery, write less, do more.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.