WordPress.org

Ready to get started?Download WordPress

Forums

Custom jQuery plugins not working. (1 post)

  1. Aryahell
    Member
    Posted 1 year ago #

    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 Popout

    I 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.

Topic Closed

This topic has been closed to new replies.

About this Topic