我正在编辑这个模板,我删除了覆盖并将它移到底部以在将鼠标移到图像上时查看图像。
从这个:
到这个:
但问题是当我点击文本时会打开图像。只有当我点击他的缩略图而不是点击文本时才能打开图像!
我是jquery的新手,所以我想请教!
这是我的代码:
<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>
在 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();
});
});
我试图添加<a>
到
/* 当一个投资组合项目被点击时 */
jQuery('#portfolio-items.enabled li a ').live("click", function(e) {
但不起作用。
任何帮助表示赞赏!
谢谢