Trying to change an event to preventDefault in WordPress site using Joomla template

3 Views

I’m coding a WordPress site using a Joomla template (client liked the template, so I’m converting to WordPress). The problem I am having is that I want the background image caption to not show on load, but instead only show after clicking the link button.

This is the site that is functioning the way I would like: http://livedemo00.template-help.com/joomla_33451/index.php

Read More

Here is my WordPress version: http://gt.khcreativemedia.com/

I believe I have all of the same code in place, javascript and css.

Here is the code that I believe is handling this: 

    <script type="text/javascript">
    var $j = jQuery.noConflict();

    $j(function()
    {

    $j("#link").click(function(event) {
    event.preventDefault();
    $j(this).toggleClass("link2");
    $j("#top_menu").slideToggle("slow");
    });
            })

</script>

I’m using a javascript gallery called jdgallery. Here is a reduced section of code from the image section: 

<div class="jbgallery"> 
 <ul> 
   <li>
      <a title="" href="<?php bloginfo( 'template_url' ); ?>/images/background/Auburn.jpg">1</a> 
      <div class="caption">Mauris pharetra lorem in velit scelerisque hendrerit. Etiam id sapien eros. Etiam ante velit, fermentum et
      </div> 
 </ul> 
</div><!-- #jbgallery -->

Can anyone tell me what I may be doing wrong.

Thanks in advance,
Keith

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. You’re missing a comma. Replace 

    jQuery(document).ready(function(){
    jQuery(".jbgallery").jbgallery({
        menu : "numbers", 
        style: "zoom", 
        caption : true,
        slideshow : true,
        labels   : {
            info : "I"
        }
        ready : function(){
            jQuery(".jbg-caption").hide();
        }


    });
});

    with 

    jQuery(document).ready(function(){
    jQuery(".jbgallery").jbgallery({
        menu : "numbers", 
        style: "zoom", 
        caption : true,
        slideshow : true,
        labels   : {
            info : "I"
        },
        ready : function(){
            jQuery(".jbg-caption").hide();
        }


    });
});

  2. Perhaps I’m misunderstanding, but if you want it not visible, you could add a call to hide() on the element on load, like this:

    var $j = jQuery.noConflict();

$j(function(){
    // hide it first thing onload?
    $j("#top_menu").hide();

    $j("#link").bind('click', function(event) {
        $j(this).toggleClass("link2");
        $j("#top_menu").slideToggle("slow");
        event.preventDefault();
    });

});

    Alternately, simply add display: none to the element’s html:

    <div id="top_menu" style="display: none">