where do i have to insert a javascript/jquery script to run an css 3 effect?

francoise · #1 Dec 3, 2012, 03:14 AM

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!