¿Cómo instalar jQuery slideViewer en wordpress? este es mi header.php donde se supone que se debe llamar el jQuery
Código:
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" href="css/jquery.jqzoom.css">
<meta charset="UTF-8" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> <?php } ?> <?php wp_title(); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" href="/jqzoom_ev-2.3/css/jquery.jqzoom.css">
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/estilos.css" />
<script src="< ?php bloginfo('template_directory'); ? >/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="< ?php bloginfo('template_directory'); ? >/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="< ?php bloginfo('template_directory'); ? >/jquery.slideviewer.1.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div#mygalone").slideView({toolTip: true, ttOpacity: 0.5}) // ttOpacity can be 0.1 to 1.0
});
</script>
<style>/*preload classes*/
.svw {width: 50px; height: 20px; background: #fff ;}
.svw ul {position: relative; left: -999em;}
/*core classes*/
.stripViewer {
position: relative;
overflow: hidden;
border: 5px solid #ff0000 ;
margin: 0 0 1px 0;
}
.stripViewer ul { /* this is your UL of images */
margin: 0;
padding: 0;
position: relative;
left: 0;
top: 0;
width: 1%;
list-style-type: none;
}
.stripViewer ul li {
float:left;
}
.stripTransmitter {
overflow: auto;
width: 1%;
}
.stripTransmitter ul {
margin: 0;
padding: 0;
position: relative;
list-style-type: none;
}
.stripTransmitter ul li{
width: 20px;
float:left;
margin: 0 1px 1px 0;
}
.stripTransmitter a{
font: bold 10px Verdana, Arial;
text-align: center;
line-height: 22px;
background: #ff0000 ;
color: #fff ;
text-decoration: none;
display: block;
}
.stripTransmitter a:hover, a.current{
background: #fff ;
color: #ff0000 ;
}
/*tooltips formatting*/
.tooltip
{
padding: 0.5em;
background: #fff ;
color: #000 ;
border: 5px solid #dedede ;
}</style>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
<!-- ToolTip -->
<script type="text/javascript">
$(document).ready(function () {
var targets = $('[rel~=tooltip]'),
target = false,
tooltip = false,
title = false;
targets.bind('mouseenter', function () {
target = $(this);
tip = target.attr('title');
tooltip = $('<div id="tooltip"></div>');
if(!tip || tip == '') return false;
target.removeAttr('title');
tooltip.css('opacity', 0).html(tip).appendTo('body');
var init_tooltip = function () {
if($(window).width() < tooltip.outerWidth() * 1.5) tooltip.css('max-width', $(window).width() / 2);
else tooltip.css('max-width', 340);
var pos_left = target.offset().left + (target.outerWidth() / 2) - (tooltip.outerWidth() / 2),
pos_top = target.offset().top - tooltip.outerHeight() - 0;
if(pos_left < 0) {
pos_left = target.offset().left + target.outerWidth() / 2 - 170;
tooltip.addClass('left');
}
else tooltip.removeClass('left');
if(pos_left + tooltip.outerWidth() > $(window).width()) {
pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
tooltip.addClass('right');
}
else tooltip.removeClass('right');
if(pos_top < 0) {
var pos_top = target.offset().top + target.outerHeight();
tooltip.addClass('top');
}
else tooltip.removeClass('top');
tooltip.css({
left: pos_left,
top: pos_top
}).animate({
top: '+=0',
opacity: 0.8
}, 250);
};
init_tooltip();
$(window).resize(init_tooltip);
var remove_tooltip = function () {
tooltip.animate({
top: '-=0',
opacity: 0.7
}, 80, function () {
$(this).remove();
});
target.attr('title', tip);
};
target.bind('mouseleave', remove_tooltip);
tooltip.bind('click', remove_tooltip);
});
});
</script>
</head>
<body <?php body_class(); ?>>
<div id="header">
<div class="container1">
<a href="<?php bloginfo('url'); ?>/" id="logo">
<img src="http://img854.imageshack.us/img854/6749/tumblrm837inwnjz1r9xjxo.gif" title="<?php bloginfo('name'); ?> | <?php bloginfo( 'description' ); ?>" alt="<?php bloginfo('name'); ?> | <?php bloginfo( 'description' ); ?>"/>
</a>
<div style="margin: 7px 0px 00px 0px;">
<form method="get" id="searchform" action="<?php echo get_settings('home'); ?>/">
<div>
<input type="text" style="height:20px; width:280px; font-size:11pt; font-family:Segoe UI" size="42%" name="s" id="s" value="Busca Cómics Aquí" onFocus="if (this.value=='Busca por título, publisher, género, etc...') this.value='';">
<input id="searchsubmit" type="image" src="css/images/search.png"/>
</div>
</form>
</div>
</div>
</div>
<div id="nav-contenedor" style="margin-top:-20px;" align="left">
<div id="navegacion">
<ul id="menu">
<li><a href="<?php bloginfo('url'); ?>/" title=""><strong>Inicio</strong></a></li>
<li><a href="http://r-kdcomics.foroactivo.mx/" title="Foro" target="_blank"><strong>Foro</strong></a></li>
<li><a href="http://comics.r-kd.net/series/" target="_blank"><strong>Catálogo De Cómics</strong></a></li>
</ul>
</div>
</div>
