Problema al implementar un slide jquery

ropper · #1 (**permalink**) 25/08/2011, 10:16

Buenas estoy tratando de implementar este slide a mi web: http://landofcoder.com/demo/jquery/lofslidernews/index2.html

El caso es que lo implemento, lo adecuo, pero los links no me funcionan. Cada foto va a un link diferente de mi sitio, pero lo extraño es que solo funciona el último link de la última foto que pongas, y todas las que están por encima van tambien a ese link. No se si me explico. Lo he intentado probar en el plugin directamente por si era problema de mi pagina y de mi implementacion, pero en el original pasa lo mismo, solo funciona la última foto.

A ver si alguien que sepa me puede echar una mano, pq, además que no se mucho de programación, esto me está volviendo loco.
He leido en foros ingleses que pòdría ser problema del css que viene con él, pero no estoy seguro...

De todas formas os dejo el codigo del original:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lof JSliderNews 1.0 - Jquery 1.3</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$('#lofslidecontent45').lofJSidernews( { interval:10000,
easing:'easeInOutQuad',
duration:1200,
auto:true } );
});

</script>
<style>

ul.lof-main-wapper li {
position:relative;
}
</style>
</head>
<body>
<div id="container">
<h1><strong>Lof JSliderNews 1.0</strong> - Jquery 1.3 & Easing plugin</h1>

<p>
<strong> Direction: Left - Right - Navitagor on the right side .</strong>
The plugin allow to use the wheelup and wheeldown to previous|next item in the list
</p>

<div id="lofslidecontent45" class="lof-slidecontent">
<div class="preload"><div></div></div>

<div class="lof-main-outer">
<ul class="lof-main-wapper">
<li>
<img src="images/791902news3.jpg" title="Newsflash 2" height="300" width="900">
<div class="lof-main-item-desc">
<h3><a target="_parent" title="prueba totarrr" href="http://www.tecnolansl.es">prueba totar</a></h3>

<p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,...</p>
</div>
</li>
<li>
<img src="images/435576news10.jpg" title="Newsflash 1" height="300" width="900"> <div class="lof-main-item-desc">
<h3><a target="_parent" title="Newsflash 1" href="#">Newsflash 1</a></h3>
<p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...</p>

</div>
</li>
<li>
<img src="images/641906img1.jpg" title="Newsflash 3" height="300" width="900"> <div class="lof-main-item-desc">
<h3><a target="_parent" title="Newsflash 3" href="#">Newsflash 3</a></h3>
<p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...</p>
</div>
</li>
<li>

<img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900"> <div class="lof-main-item-desc">
<h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3>
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
</div>
</li>

<li>

<img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900"> <div class="lof-main-item-desc">
<h3><a target="_parent" title="grandenauer" href="http://www.marca.com">Newsflash 5</a></h3>
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
</div>
</li>
<li>

<img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900"> <div class="lof-main-item-desc">
<h3><a target="_parent" title="Newsf" href="http://www.tecnolansl.es">Newsflash 5</a></h3>
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
</div>
</li>
</ul>
</div>



<div class="lof-navigator-outer">
<ul class="lof-navigator">
<li>
<div>
<img src="images/lofthumbs/791902news3.jpg" />
<h3> NewsFlash 1 </h3>
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu...
</div>
</li>
<li>
<div>
<img src="images/lofthumbs/435576news10.jpg" />
<h3> NewsFlash 2 </h3>
<span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
</div>
</li>

<li>
<div>
<img src="images/lofthumbs/641906img1.jpg" />
<h3> NewsFlash 3 </h3>
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
</div>
</li>

<li>
<div>
<img src="images/lofthumbs/416719news7.jpg" />
<h3> NewsFlash 4</h3>
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
</div>
</li>
<li>
<div>
<img src="images/lofthumbs/641906img1.jpg" />
<h3> NewsFlash 5</h3>
<span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
</div>
</li>
<li>
<div>
<img src="images/lofthumbs/416719news7.jpg" />
<h3> NewsFlash 6</h3>
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">

</script>


<p>
<a href="index.html">Demo 1</a> | <a href="index2.html">Demo 2</a> | <a href="index3.html">Demo 3</a> | <a href="index4.html">Demo 4</a> | <a href="index5.html">Demo 5</a> | <a href="index6.html">Demo 6</a> </p>
<div id="footer">
<a href="http://landofcoder.com">LandOfCoder.Com</a>
</div>
</div>
</body>
</html>

Aparte os dejo el link para descargar todo el paquete por si alguien lo quiere bichear:
http://landofcoder.com/download.html?task=view.download&cid=9

Gracias por escuchar el coñazo que os he soltao, pero es importante, ya que he trabajao un webo para poder ponerlo en mi web y no quiero publicarlo hasta que furule del todo.

Saludos

ropper · #2 (**permalink**) 25/08/2011, 11:20

Onde esta el tema?????

Ya lo encontré, lo siento por la torpeza...

chichote · #3 (**permalink**) 25/08/2011, 12:10

ropper, no tiene mucho sentido postear el codigo origina, seria mejor que nos des algun link con lo que tu hiciste para poder revisar y quizas alguien te pueda ayudar, el codigo original lo baje y funciona correctamente.

Saludos.

ropper · #4 (**permalink**) 25/08/2011, 15:30

Cita:

Iniciado por Cherivera

ropper, no tiene mucho sentido postear el codigo origina, seria mejor que nos des algun link con lo que tu hiciste para poder revisar y quizas alguien te pueda ayudar, el codigo original lo baje y funciona correctamente.

Saludos.

Pues yo no consigo que me funcionen los links correctamente, ni en el original ni en el mío. Si pudieras indicarme como lo has comprobado te lo agardecería. Igual estoy muy ciego con to el tiempo que le he echado a este tema. Si fueras tan amable de comentarme como lo has comprobado, te estaría muy agradecido

ropper · #5 (**permalink**) 26/08/2011, 05:27

Buenas de nuevo. Por fin he podido lograr que me funcione. era un problema de implantación. Empecé de nuevo y lo conseguí.
Ahora tengo un problema, espero, con menos quebraderos de cabeza.

He adecuado el plugin a la web (le cambié el tamaño), y ahora lo que me pasa es que el slide no funciona del todo bien, me corta las fotos, es decir, cuando hace la transición de una a otra, no las pasa enteras.
Como se que no me explico muy bien os dejo un link para que lo veáis. Me imagino que habrá que modificar algo en el css, pero por más que he probado no lo encuentro.

http://www.tecnolansl.es/index.html

Os dejo tb el css por si acaso.

@charset "utf-8";
/* CSS Document */
#lofslidecontent45{
margin: 0 auto;
}
.lof-slidecontent{
position:relative;
overflow:hidden;
border:#F4F4F4 solid 1px;
width:992px;
height:300px;
}
.lof-slidecontent .preload{
height:100%;
width:100%;
background:#FFF;
position:absolute;
top:0;
left:0;
z-index:100000;
color:#FFF;
text-align:center
}
.lof-slidecontent .preload div{
height:100%;
width:100%;
background:transparent url(../images/slidefrontal/load-indicator.gif) no-repeat scroll 50% 50%;
}
.lof-main-outer{
position:relative;
height:100%;
width:697px;
z-index:3px;
overflow:hidden;
}

/************************************************** *****/
.lof-main-item-desc{
z-index:100px;
position:absolute;
top:150px;
left:50px;
width:400px;
background:url(../images/slidefrontal/transparent_bg.png);

/* filter:0.7(opacity:60) */
}
.lof-main-item-desc p{
color:#FFF;
margin:0 8px;
padding:8px 0
}
.lof-main-item-desc h3 a{
color:#FFF;
margin:0;
font-size:100%;
padding:20px 8px 2px;
font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
.lof-main-item-desc h3 a:hover{
color:#FF6;
text-decoration:none;
}

/* main flash */
ul.lof-main-wapper{
/* margin-right:auto; */
overflow:hidden;
background:transparent url(../images/slidefrontalload-indicator.gif) no-repeat scroll 50% 50%;
padding:0px;
margin:0;
height:300px;
width:600px;
position:absolute;
overflow:hidden;
}

ul.lof-main-wapper li{
overflow:hidden;
padding:0px;
margin:0px;
height:100%;
width:697px;
float:left;
}
.lof-opacity li{
position:relative;
top:0;
left:0;
float:inherit;
}
ul.lof-main-wapper li img{
padding:0px;
width:697px;
}

li-desc{
z-index:100px;
position:absolute;
top:150px;
left:50px;
width:400px;
background:url(../images/slidefrontal/transparent_bg.png);

/* filter:0.7(opacity:60) */
}
li-desc p{
color:#FFF;
margin:0 8px;
padding:8px 0
}
li-desc h3 a{
color:#FFF;
margin:0;
font-size:140%;
padding:20px 8px 2px;
font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
li-desc h3 a:hover{
color:#FF6;
text-decoration:underline;
}

/* item navigator */
ul.lof-navigator{
top:0;
padding:0;
margin:0;
position:absolute;
width:100%;
}
ul.lof-navigator li{
cursor:hand;
cursor:pointer;
list-style:none;
width:100%;
padding:0;
margin:0;
overflow:hidden;
}
.lof-navigator-outer{
position:absolute;
right:0;
top:00px;
z-index:100;
height:300px;
width:310px;
overflow:hidden;
color:#FFF
}
.lof-navigator li.active{
background:url(../images/slidefrontal/arrow-bg.png) no-repeat scroll left center;
color:#FFF
}
.lof-navigator li:hover{

}

.lof-navigator li h3{
color:#FFF;
font-size:100%;
padding:15px 0 0 !important;
margin:0;

}
.lof-navigator li div{
background:url(../images/slidefrontal/transparent_bg.png);
color:#FFF;
height:100%;
position:relative;
margin-left:15px;
padding-left:15px;
border-top:1px solid #E1E1E1;
}

.lof-navigator li.active div{
background:url(../images/slidefrontal/grad-bg.gif);
color:#FFF;
}
.lof-navigator li img{
height:60px;
width:60px;
margin:15px 15px 10px 0px;
float:left;
padding:3px;
border:#C5C5C5 solid 1px;
}
.lof-navigator li.active img{
border:##6C8E5C solid 1px;
}
.lof-navigator li.active h3{
color:#FFF;
}

Gracias por la paciencia. Saludos

chichote · #6 (**permalink**) 29/08/2011, 16:57

Veo que ya lo solucionaste, esta quedando buena la web.

Saludos.