[英]Image rollover in a float grid style
I made a simple roll over for links in a widget area (un-sure how to do that part, not important at the moment) The site I am making this for is at www.avuedesigns.com/new Currently on the left side under the banner content box, I would like this to be that in that area. 我对窗口小部件区域中的链接进行了简单的滚动(不确定如何执行此操作,此刻不重要),我为此创建的网站位于www.avuedesigns.com/new,目前位于左侧横幅内容框,我希望是那个区域。
This is what I came up with http://jsfiddle.net/paDmg/368/ 这就是我想出的http://jsfiddle.net/paDmg/368/
So my question would be, would this work in that area(execution wise), or try a different way?. 所以我的问题是,这将在那个领域(执行明智)还是尝试另一种方式?
Also would this be easy to make this a widget for wordpress to put that in that area? 同样,将其制作为供Wordpress放置在该区域的小部件是否容易? Our php guy is on vacation for 2 weeks, and trying to complete the project on my own.
我们的php家伙正在休假2周,并尝试自己完成该项目。 I am sure I can figure it out, I just need to be pointed in direction to a method.
我相信我能弄清楚,我只需要指出一种方法的方向。
Once again here is the roll over : http://jsfiddle.net/paDmg/368/ 再次这里是翻转: http : //jsfiddle.net/paDmg/368/
Also copy pasted here. 也复制粘贴在这里。
CSS 的CSS
ul#hover-grid {
padding: 0;
list-style: none;
margin: 0px auto 0;
margin-top: 0;
width: 220px;
}
#hover-grid li {
float: left;
padding: 2;
margin: 0 1px 1px 1px;
}
#hover-grid .indiv-cell {
width: 65px;
height: 65px;
}
Html HTML
<ul id="hover-grid">
<li class="indiv-cell"><a href="#"><img data-replacementimg="http://avuedesigns.com/new/wp-content/uploads/2012/09/1.jpg" src="http://avuedesigns.com/new/wp-content/uploads/2012/09/6.jpg"></a></li>
<li class="indiv-cell"><a href="#"><img data-replacementimg="http://avuedesigns.com/new/wp-content/uploads/2012/09/2.jpg" src="http://avuedesigns.com/new/wp-content/uploads/2012/09/6.jpg"></a></li>
<li class="indiv-cell"><a href="#"><img data-replacementimg="http://avuedesigns.com/new/wp-content/uploads/2012/09/3.jpg" src="http://avuedesigns.com/new/wp-content/uploads/2012/09/6.jpg"></a></li>
<li class="indiv-cell"><a href="#"><img data- replacementimg="http://avuedesigns.com/new/wp-content/uploads/2012/09/4.jpg" src="http://avuedesigns.com/new/wp-content/uploads/2012/09/6.jpg"></a></li>
<li class="indiv-cell"><a href="#"><img data-replacementimg="http://avuedesigns.com/new/wp-content/uploads/2012/09/1.jpg" src="http://avuedesigns.com/new/wp-content/uploads/2012/09/6.jpg"></a></li>
<li class="indiv-cell"><a href="#"><img data-replacementimg="http://avuedesigns.com/new/wp-content/uploads/2012/09/2.jpg" src="http://avuedesigns.com/new/wp-content/uploads/2012/09/6.jpg"></a></li>
</ul>
Javascript Java脚本
$('#hover-grid .indiv-cell').hover(function() {
//set variables to current cell attributes
var cellHeader = $(this).attr('data-hoverheader');
var cellText = $(this).attr('data-hovertext');
var replacementImg = $(this).find('a img').attr('data-replacementimg');
var oringinalImg = $(this).find('a img').attr('src');
//save original image to data variable
$(this).data('origImg', oringinalImg);
//add remove classes
$('#hover-grid .indiv-cell').removeClass('newClass');
$(this).addClass('newClass', 1000);
$(this).find('a img').hide().attr('src', replacementImg).fadeIn(300);
$('.master-cell h1').hide().text(cellHeader).fadeIn(300);
$('.master-cell p').hide().text(cellText).fadeIn(300);
//return false;
}, function() {
$(this).find('a img').hide().attr('src', $(this).data('origImg')).fadeIn(10);
});
I believe you want to turn your html into a dynamic nav menu, right? 我相信您想将HTML转换为动态导航菜单,对不对? The Wordpress codex has settings for this where you can structure the menu to match your html .
WordPress的Codex 对此具有设置,您可以在其中设置菜单以匹配html 。
I think some settings like this might get you started 我认为这样的设置可能会让您入门
<?php $defaults = array(
'theme_location' => 'custom-menu',
'container' => 'div',
'menu_class' => 'indiv-cell',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'items_wrap' => '<ul id="hover-grid">%2$s</ul>',
); ?>
<?php wp_nav_menu( $defaults ); ?>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.