jQuery sliding door

I’m editing this template, I removed the overlay and I moved it to bottom to see the images when move mouse over image.

from this:

Read More

enter image description here

to this:

enter image description here

But the problem is that when I click on the text opens the image. The image must be opened only when I click on his thumbnail not when click on the text!

I am a newbie of jquery so I would like to ask help please!

This is my code:

<ul id="portfolio-items" class="<?php if($magic_door) : ?>enabled<?php endif; ?> clearfix">
    <li id="portfolio-<?php the_ID(); ?>" class="<?php echo $output; ?>visible" data-id="post-<?php the_ID(); ?>">
         <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
             <a class="entry-link" href="<?php the_permalink(); ?>">
                  <?php tz_featured_image(get_the_ID(), TRUE); ?>
             </a>
        </div>
        <div class="entry-headline">
             <div class="entry-title">
                <h5><?php the_title(); ?></h5>
             </div>
        </div>
        <div class="entry-info">
             <?php the_excerpt(); ?>
        </div>
    </li>
    <?php endwhile; endif; ?>
</ul> 

In HTML:

<ul id="portfolio-items" class="enabled clearfix isotope">                   
         <li id="portfolio-48" class="term-7 visible isotope-item" data-id="post-48">
                <!--BEGIN .hentry -->
                 <div class="post-48 portfolio type-portfolio status-publish hentry" id="post-48">
                        <a class="entry-link" href="http://www.ilprofetamuhammad.it/?portfolio=sky"> 
                        <img src="http://turbo.themezilla.com/garnish/files/2011/06/sky.jpg" alt="Sky"></a>
                </div>

                <div class="entry-headline">
                        <div class="entry-title">
                            <h5>Sky</h5>
                        </div>
                        <div class="entry-date">October 24th, 2012</div>                
                </div>
                        <!--END .hentry-->  
        </li>

        <li id="portfolio-44" class="visible isotope-item" data-id="post-44">
                 <!--BEGIN .hentry -->
                 <div class="post-44 portfolio type-portfolio status-publish hentry" id="post-44">
                        <a class="entry-link" href="http://www.ilprofetamuhammad.it/?portfolio=test"> 
                        <img src="http://turbo.themezilla.com/garnish/files/2012/01/stars-t.jpg" alt="Test"></a>
                </div>

                <div class="entry-headline">
                        <div class="entry-title">
                            <h5>Test</h5>
                        </div>
                        <div class="entry-date">October 24th, 2012</div>                
                </div>
                        <!--END .hentry-->  
        </li>
</ul>

Javascript:

    var magicDoor = jQuery('#door-frame')
    var url = magicDoor.find('#magic-door').attr('data-url');
    var portfolioItems = jQuery('#portfolio-items li');
    var portfolioItemsEnabled = jQuery('#portfolio-items.enabled li');

    if(magicDoor.hasClass('open') && jQuery('#portfolio-items').hasClass('enabled')) {
        var postId = magicDoor.attr('data-id');
        portfolioItems.removeClass('active');
        jQuery('#portfolio-' + postId).addClass('active');
        portfolioItems.not('.active').find('.overlay').css({ display: 'none' });
        tz_getPortfolio(postId);
    }
    /*  When a portfolio item is clicked */
    jQuery('#portfolio-items.enabled li').live("click", function(e) {   
        if(!jQuery(this).hasClass('active') && jQuery(this).hasClass('visible')) {
            portfolioItems.removeClass('active');
            jQuery(this).addClass('active');
            portfolioItems.not('.active').find('.overlay').css({ display: 'none' });
            var postId = jQuery(this).attr('id').split('portfolio-')[1];
            tz_getPortfolio(postId);
        }
        e.preventDefault();
    });     
 });

I tried to add <a> to

/* When a portfolio item is clicked */
jQuery(‘#portfolio-items.enabled li a‘).live(“click”, function(e) {

But doesn’t work.
Any help is appreciated!
Thanks

Related posts

Leave a Reply

1 comment

  1. My suspicion is that you haven’t included the relevant code. i.e. I don’t see the the HTML element anywhere… #magic-door … which is what your plugin is likely loading the element and likely the popup.

    You really should be diving into the source code of the template you are using, and if you cant read/decipher the code you have… bigger problems.

    none-the-less, here is the best solution I can offer you.

    1. Make sure you are selecting / passing the proper postID (presumably how your template works).

    2. Google JavaScript Debugging – as you don’t really seem to be asking the right/relevant/constructive enough questions.