| francoise |
Dec 3, 2012 03:14 AM |
where do i have to insert a javascript/jquery script to run an css 3 effect?
Hello
I want to integrate an jquery hover on some images in a page in atahualpa, the hover should look like this page: " http://tympanus.net/TipsTricks/Direc...reHoverEffect/".
I'm working on a localhost, so i can't give you a link for the site. My Problem is, that i don't know where i have to put the scripts in atahualpa/wordpress.
So what did i wrong? I try this:
CODE on page:
Code:
<ul id="da-thumbs" class="da-thumbs">
<li><a href="http://localhost/wochentage/januar/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/1.jpg" alt="" /> </a>
<div><span> Januar </span></div></li>
<li><a href="http://localhost/wochentage/februar/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/2.jpg" alt="" /> </a>
<div><span> Februar </span></div></li>
<li><a href="http://localhost/wochentage/maerz/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/3.jpg" alt="" /> </a>
<div><span> März </span></div></li>
<li><a href="http://localhost/wochentage/apri/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/4.jpg" alt="" /> </a>
<div><span> April </span></div></li>
<li><a href="http://localhost/wochentage/mai/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/5.jpg" alt="" /> </a>
<div><span> Mai </span></div></li>
<li><a href="http://localhost/wochentage/juni/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/6.jpg" alt="" /> </a>
<div><span> Juni </span></div></li>
<li><a href="http://localhost/wochentage/jul/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/7.jpg" alt="" /> </a>
<div><span> Juli </span></div></li>
<li><a href="http://localhost/wochentage/augus/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/8.jpg" alt="" /> </a>
<div><span> August </span></div></li>
<li><a href="http://localhost/wochentage/septembe/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/9.jpg" alt="" /> </a>
<div><span> September </span></div></li>
<li><a href="http://localhost/wochentage/oktober/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/10.jpg" alt="" /> </a>
<div><span> Oktober </span></div></li>
<li><a href="http://localhost/wochentage/november/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/11.jpg" alt="" /> </a>
<div><span> November </span></div></li>
<li><a href="http://localhost/wochentage/dezember/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/12.jpg" alt="" /> </a>
<div><span> Dezember </span></div></li>
</ul>
I need 3 scripts + jquery vers. 1.8.3
I put the script "jquery.hoverdir.js" in Wordpress wp-includes/js/jquery/
I put the script "modernizr.custom.97074" in atahualpa373/js
i put the script "noJS.css" in atahualpa373/css
In ata FUNCTION.PHP i insert (just after this script:"// Since 3.6: Include Javascripts here and with wp_enqueue instead of header.php":)
Code:
add_action( 'wp_print_scripts', 'add_my_scripts', 100 );
function add_my_scripts() {
if ( !is_admin() ) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', ( 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' ), false, null, true );
wp_enqueue_script( 'jquery' );
wp_register_script( 'hoverdir', 'http://localhost/wochentage/wp-includes/js/jquery/jquery.hoverdir.js');
wp_enqueue_script( 'hoverdir' );
} }
add_action('init', 'add_my_scripts');
In ATAHUALPA/OPTIONS:
in HTML INSERTS:
HEADER:
Code:
<script src="http://localhost/wochentage/wp-content/themes/atahulpa373/js/modernizr.custom.97074.js"></script>
<noscript><link rel="stylesheet" type="text/css" href="http://localhost/wochentage/wp-content/themes/atahulpa373/css/noJS.css"/></noscript>
BODY BOTTOM (I also tried this with "jquery" instead of "$" with no result):
Code:
<script type="text/javascript" src="http://localhost/wochentage/wp-includes/js/jquery/jquery.hoverdir.js"></script>
<script type="text/javascript">
$(function() {
$(' #da-thumbs > li ').each( function() { $(this).hoverdir(); } );
});
</script>
CSS INSERTS:
Code:
/*Grösse des gesamten Rahmens*/
.da-thumbs {
list-style: none;
width: 800px;
height: 800px;
position: relative;
margin: 20px auto;
padding: 0;
}
.da-thumbs li {
float: left;
margin: 5px;
background: #fff;
padding: 8px;
position: relative;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs a{
color: #FF0;
text-decoration: none;
}
.da-thumbs li a,
.da-thumbs li a img {
display: block;
position: relative;
}
.da-thumbs li a {
overflow: hidden;
}
.da-thumbs li a div {
position: absolute;
background: #333;
background: rgba(75,75,75,0.7);
width: 100%;
height: 100%;
}
.da-thumbs li a div span {
display: block;
padding: 10px 0;
margin: 40px 20px 20px 20px;
text-transform: uppercase;
font-weight: normal;
color: rgba(255,255,255,0.9);
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(255,255,255,0.5);
box-shadow: 0px 1px 0px rgba(0,0,0,0.1),0 -10px 0 rgba(255,255,255,0.3);
}
every help would be fantastic! |
