Попытка изменить событие для предотвращения дефолта на сайте Wordpress с помощью шаблона Joomla

Question

Я кодирую сайт Wordpress, используя шаблон Joomla (клиенту понравился шаблон, поэтому я конвертирую в Wordpress). У меня проблема в том, что я хочу, чтобы заголовок фонового изображения не отображался при загрузке, а отображался только после нажатия кнопки ссылки.

Сайт работает так, как мне хотелось бы: http://livedemo00.template -help.com / joomla_33451 / index.php

Вот моя версия Wordpress: http://gt.khcreativemedia.com/

Я считаю, что у меня есть все один и тот же код, javascript и css.

Вот код, который я считаю, обрабатывает это:

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

Я использую галерею javascript под названием jdgallery. Вот уменьшенный фрагмент кода из раздела изображений:

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

Может кто-нибудь сказать мне, что я могу делать неправильно.

Спасибо заранее, Keith

Answer 1

Вам не хватает запятой. Заменить

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


    });
});

с

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


    });
});

Answer 2

Возможно, я неправильно понимаю, но если вы хотите, чтобы он не был виден, вы можете добавить вызов к hide() для элемента при загрузке, например так:

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();
    });

});

Альтернативно, просто добавьте display: none к html элемента:

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