Custom jQuery plugins not working.
-
Hello all ??
I am trying to convert a HTML 5 theme I found on internet in a fully functional Worpdress theme for a school project.
I am done with the custom post types and the HTML/CSS.The issue I am having is making the custom jQuery/Javascipt plugins working on the website. These plugins are :
-Background Slider
-Header Slider
-Text Slider
-Image PopoutI am a novice to anything javascript related, so I blindly followed tutorials on how add to my own version of javascript in WordPress. Here is what I added in my Header.
Before <?php wp_head(); ?>
<?php wp_enqueue_script("jquery"); ?>
After <?php wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.min.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/custom.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/slider.js"></script> <script src="<?php bloginfo('template_directory'); ?>/js/slides/source/slides.min.jquery.js"></script> <script src="<?php bloginfo('template_directory'); ?>/js/quicksand.js"></script>
At first I couldn’t find where the javascrpit plugins where called but it seems to be from custom.js. Each custom javascipt is linked to css markups (stop me if I am talking nonsense i am trying to figure stuff). Here is a part of the code in js/custom.js file :
// Jquery with no conflict jQuery(document).ready(function($) { //########################################## // Nav menu //########################################## $("ul.sf-menu").superfish({ animation: {height:'show'}, // slide-down effect without fade-in delay: 400 , // 1.2 second delay on mouseout autoArrows: false, speed: 'normal' }); //########################################## // Header nav //########################################## $(document).mousemove(function(e){ if((e.pageY) < 200){ $("#headernav").fadeIn(); }else{ $("#headernav").fadeOut(); } }); //########################################## // Front slides //########################################## $('#front-slides').slides({ preload: true, generateNextPrev: false, slideSpeed: 500, animationStart: function(current){ $slideCaption = $(".slides_container div.slide:eq("+ (current-1) +") .caption").text(); $("#headline h6").text($slideCaption); if($slideCaption != ''){ $("#headline").stop().hide().slideDown(600); }else{ $("#headline").hide(); } } }); // default headline $firstCaption = $(".slides_container div.slide:eq(0) .caption").text(); if($firstCaption != ''){ $("#headline h6").text($firstCaption); }else{ $("#headline").hide(); } //########################################## // Reel slides //########################################## $('#reel').slides({ preload: true, generateNextPrev: false, generatePagination: false, next: 'next', slideSpeed: 700 }); //########################################## // Rollovers //########################################## $('.featured-posts .thumb, .gallery-thumbs a, .work-thumbs a').live("mouseover mouseout", function(event){ if ( event.type == "mouseover" ) { thiImage = $(this).children('img'); thiImage.stop().animate({opacity:0.3},{queue:false,duration:200}); }else{ thiImage.stop().animate({opacity:1},{queue:false,duration:200}); } });
It is surprising because it seems like some of the javascript works but I am not sure about anything.
Do I need to edit anything in the custom.js file or change the way the plugins are called ?
I hope I have been clear enough, and if you need any further information just ask me i will provide anything needed !
Thank you for helping !
Cheers,
Aryahell.
- The topic ‘Custom jQuery plugins not working.’ is closed to new replies.