Galeria de imagenes html con marquee
Soy nuevo en la creación de páginas web, y estoy haciendo una personal. Mi problema surge cuando quiero crear una galería de imágenes, para la que estoy utilizando marquee. Para mostrar las imágenes en menor tamaño y al hacer click que se vean más grande abajo. Te paso el código:
<head>
<title>Mi galeria</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript">
var fotos = new Array ("imagen1.gif","imagen2.gif","imagen3.gif","imagen4.gif","imagen5.gif","imagen6.gif","imagen7.gif","imagen8.gif", "imagen9.gif","imagen10.gif","imagen11.gif","imagen12.gif","imagen13.gif","imagen14.gif", "imagen15.gif","imagen16.gif","imagen17.gif","imagen18.gif","imagen19.gif","imagen20.gif");
function visualisar(num){
var ver = new Image(300,250);
num=num-1;
document.ver.src = fotos[num];
}
//-->
</SCRIPT>
</head>
<body>
<table width="500" height="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="90" valign="top"> <marquee width="550" height="75">
<br>
<img src="imagen1.gif" width="75" height="63" onClick="visualisar(1)">
<img src="imagen2.gif" width="75" height="63" onClick="visualisar(2)">
<img src="imagen3.gif" width="75" height="63" onClick="visualisar(3)">
<img src="imagen4.gif" width="75" height="63" onClick="visualisar(4)">
<img src="imagen5.gif" width="75" height="63"onClick="visualisar(5)">
<img src="imagen6.gif" width="75" height="63" onClick="visualisar(6)">
<img src="imagen7.gif" width="75" height="63" onClick="visualisar(7)">
<img src="imagen8.gif" width="75" height="63" onClick="visualisar(8)">
<img src="imagen9.gif" width="75" height="63"onClick="visualisar(9)">
<img src="imagen10.gif" width="75" height="63" onClick="visualisar(10)">
<img src="imagen11.gif" width="75" height="63" onClick="visualisar(11)">
<img src="imagen12.gif" width="75" height="63" onClick="visualisar(12)">
<img src="imagen13.gif" width="75" height="63" onClick="visualisar(13)">
<img src="imagen14.gif" width="75" height="63" onClick="visualisar(14)">
<img src="imagen15.gif" width="75" height="63" onClick="visualisar(15)">
<img src="imagen16.gif" width="75" height="63" onClick="visualisar(16)">
<img src="imagen17.gif" width="75" height="63" onClick="visualisar(17)">
<img src="imagen18.gif" width="75" height="63" onClick="visualisar(18)">
<img src="imagen19.gif" width="75" height="63" onClick="visualisar(19)">
<img src="imagen20.gif" width="75" height="63" onClick="visualisar(20)">
</marquee> <font color="#242969" size="2" face="Arial, Helvetica, sans-serif"><strong><br>
<center>PULSA SOBRE LA FOTO PARA VERLA AMPLIADA</center> </strong></font> </td>
</tr>
<tr>
<td height="210" valign="top"> <br>
<center> <img src="imagen1.gif" name="ver" width="250" height="210" id="ver"></center>
</td>
</tr>
</table>
</body>
Mi problema es que al subir la página solo me muestra 5 imágenes en la marquesina y vuelve a empezar.
También me gustaría consultarte si existe la forma de hacer la marquesina "continua" y que no deje un espacio en blanco desde que termina hasta que vuelve a empezar.
<head>
<title>Mi galeria</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript">
var fotos = new Array ("imagen1.gif","imagen2.gif","imagen3.gif","imagen4.gif","imagen5.gif","imagen6.gif","imagen7.gif","imagen8.gif", "imagen9.gif","imagen10.gif","imagen11.gif","imagen12.gif","imagen13.gif","imagen14.gif", "imagen15.gif","imagen16.gif","imagen17.gif","imagen18.gif","imagen19.gif","imagen20.gif");
function visualisar(num){
var ver = new Image(300,250);
num=num-1;
document.ver.src = fotos[num];
}
//-->
</SCRIPT>
</head>
<body>
<table width="500" height="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="90" valign="top"> <marquee width="550" height="75">
<br>
<img src="imagen1.gif" width="75" height="63" onClick="visualisar(1)">
<img src="imagen2.gif" width="75" height="63" onClick="visualisar(2)">
<img src="imagen3.gif" width="75" height="63" onClick="visualisar(3)">
<img src="imagen4.gif" width="75" height="63" onClick="visualisar(4)">
<img src="imagen5.gif" width="75" height="63"onClick="visualisar(5)">
<img src="imagen6.gif" width="75" height="63" onClick="visualisar(6)">
<img src="imagen7.gif" width="75" height="63" onClick="visualisar(7)">
<img src="imagen8.gif" width="75" height="63" onClick="visualisar(8)">
<img src="imagen9.gif" width="75" height="63"onClick="visualisar(9)">
<img src="imagen10.gif" width="75" height="63" onClick="visualisar(10)">
<img src="imagen11.gif" width="75" height="63" onClick="visualisar(11)">
<img src="imagen12.gif" width="75" height="63" onClick="visualisar(12)">
<img src="imagen13.gif" width="75" height="63" onClick="visualisar(13)">
<img src="imagen14.gif" width="75" height="63" onClick="visualisar(14)">
<img src="imagen15.gif" width="75" height="63" onClick="visualisar(15)">
<img src="imagen16.gif" width="75" height="63" onClick="visualisar(16)">
<img src="imagen17.gif" width="75" height="63" onClick="visualisar(17)">
<img src="imagen18.gif" width="75" height="63" onClick="visualisar(18)">
<img src="imagen19.gif" width="75" height="63" onClick="visualisar(19)">
<img src="imagen20.gif" width="75" height="63" onClick="visualisar(20)">
</marquee> <font color="#242969" size="2" face="Arial, Helvetica, sans-serif"><strong><br>
<center>PULSA SOBRE LA FOTO PARA VERLA AMPLIADA</center> </strong></font> </td>
</tr>
<tr>
<td height="210" valign="top"> <br>
<center> <img src="imagen1.gif" name="ver" width="250" height="210" id="ver"></center>
</td>
</tr>
</table>
</body>
Mi problema es que al subir la página solo me muestra 5 imágenes en la marquesina y vuelve a empezar.
También me gustaría consultarte si existe la forma de hacer la marquesina "continua" y que no deje un espacio en blanco desde que termina hasta que vuelve a empezar.
1 Respuesta
Respuesta de krlosnow
1
Con marquee (que solo vale para internet explorer) no se puede hacer mucho.
Echa un vistazo a SimplyScroll con jQuery, Giva Labs Jquery Plugin
Echa un vistazo a SimplyScroll con jQuery, Giva Labs Jquery Plugin
Te agradezco por la pronta respuesta, pero sinceramente no entiendo como implementar el SimplyScroll de jQuery, aunque esta muy bueno, copio los códigos de la página y no se produce el efecto. Me podrías explicar como se implementa? Gracias nuevamente.
Prueba con este código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Custom - jQuery simplyScroll - Logicbox</title>
<link rel="stylesheet" href="/css/default.css" media="all" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="http://simplyscroll.googlecode.com/files/jquery.simplyscroll-1.0.4.min.js"></script>
<script type="text/javascript">
(function($) {
$(function() {
$("#scroller").simplyScroll({
className: 'custom',
autoMode: 'loop',
pauseOnHover: false,
frameRate: 20,
speed: 2
});
});
})(jQuery);
</script>
<style type="text/css" media="screen">
.custom {
width: 576px;
height: 210px;
background-color: #FFF;
margin-bottom: 1em;
}
.custom .simply-scroll-clip {
width: 576px;
height: 210px;
}
#scroller .section {
float:left;
width: 480px;
height: 210px;
}
#scroller .hp-highlight {
height:210px;
margin:-10px 10px 10px 0;
}
#scroller .feature-headline {
position:relative;
top:140px;
width:432px;
background:white;
margin:10px 10px 20px 10px;
padding:10px 10px 0 10px;
}
#scroller .feature-headline a {
font-weight: bold;
text-decoration: none;
color:#cc0000;
}
#scroller h1 {
font-weight:normal;
font-size:19px;
}
#scroller p {
font-size: 14px !important;
color:#666666;
line-height:130%;
padding:0 0 10px;
}
.simply-scroll-container { /* Container DIV - automatically generated */
position: relative;
}
.simply-scroll-clip { /* Clip DIV - automatically generated */
position: relative;
overflow: hidden;
z-index: 2;
}
.simply-scroll-list { /* UL/OL/DIV - the element that simplyScroll is inited on */
position: absolute;
top: 0;
left: 0;
z-index: 1;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.simply-scroll-list li {
padding: 0;
margin: 0;
list-style: none;
}
.simply-scroll-list li img {
border: none;
display: block;
}
.simply-scroll-btn {
position: absolute;
background-image: url(buttons.png);
width: 42px;
height: 44px;
z-index:3;
cursor: pointer;
}
.simply-scroll-btn-left {
left: 6px;
bottom: 6px;
background-position: 0 -44px;
}
.simply-scroll-btn-left.disabled {
background-position: 0 0 !important;
}
.simply-scroll-btn-left:hover {
background-position: 0 -88px;
}
.simply-scroll-btn-right {
right: 6px;
bottom: 6px;
background-position: 84px -44px;
}
.simply-scroll-btn-right.disabled {
background-position: 84px 0 !important;
}
.simply-scroll-btn-right:hover {
background-position: 84px -88px;
}
.simply-scroll-btn-up {
right: 6px;
top: 6px;
background-position: -126px -44px;
}
.simply-scroll-btn-up.disabled {
background-position: -126px 0 !important;
}
.simply-scroll-btn-up:hover {
background-position: -126px -88px;
}
.simply-scroll-btn-down {
right: 6px;
bottom: 6px;
background-position: -42px -44px;
}
.simply-scroll-btn-down.disabled {
background-position: -42px 0 !important;
}
.simply-scroll-btn-down:hover {
background-position: -42px -88px;
}
/* Custom class modifications - override classees
.simply-scroll is default
*/
.simply-scroll { /* Customisable base class for style override DIV */
width: 576px;
height: 200px;
margin-bottom: 1em;
}
.simply-scroll .simply-scroll-clip {
width: 576px;
height: 200px;
}
.simply-scroll .simply-scroll-list {}
.simply-scroll .simply-scroll-list li {
float: left;
width: 290px;
height: 200px;
}
.simply-scroll .simply-scroll-list li img {}
.simply-scroll .simply-scroll-btn {}
.simply-scroll .simply-scroll-btn-left {}
.simply-scroll .simply-scroll-btn-left.disabled {}
.simply-scroll .simply-scroll-btn-left:hover {}
.simply-scroll .simply-scroll-btn-right {}
.simply-scroll .simply-scroll-btn-right.disabled {}
.simply-scroll .simply-scroll-btn-right:hover {}
.simply-scroll .simply-scroll-btn-up {}
.simply-scroll .simply-scroll-btn-up.disabled {}
.simply-scroll .simply-scroll-btn-up:hover {}
.simply-scroll .simply-scroll-btn-down {}
.simply-scroll .simply-scroll-btn-down.disabled {}
.simply-scroll .simply-scroll-btn-down:hover {}
/* Vertical scroller example */
.vert { /* wider than clip to position buttons to side */
width: 340px;
height: 400px;
margin-bottom: 1.5em;
}
.vert .simply-scroll-clip {
width: 290px;
height: 400px;
}
.vert .simply-scroll-list {}
.vert .simply-scroll-list li {
width: 290px;
height: 200px;
}
.vert .simply-scroll-list li img {}
.vert .simply-scroll-btn {}
.vert .simply-scroll-btn-up { /* modified btn pos */
right: 0;
top: 0;
}
.vert .simply-scroll-btn-up.disabled {}
.vert .simply-scroll-btn-up:hover {}
.vert .simply-scroll-btn-down { /* modified btn pos */
right: 0;
top: 52px;
}
.vert .simply-scroll-btn-down.disabled {}
.vert .simply-scroll-btn-down:hover {}
/* NOTE left-right classes wouldn't be needed on vertical scroller */
/* Flickr example
Images created from a data source use simpler format i.e.
<div>
<img/>
<img/>
...
</div>
*/
.flickr {
width: 576px;
height: 180px;
margin-bottom: 1.5em;
}
.flickr .simply-scroll-clip {
width: 576px;
height: 180px;
}
.flickr .simply-scroll-list img {
float: left;
border: none;
display: block;
}
</style>
</head>
<body>
<div id="scroller">
<div class="section">
<div class="hp-highlight" style="background:url(imagen1.gif) no-repeat 0 0">
<div class="feature-headline">
<h1><a href="#" title="The Prodigy" rel="external">The Prodigy</a></h1>
<p>The Prodigy is an English electronic music group formed by ...</p>
</div>
</div>
</div>
<div class="section">
<div class="hp-highlight" style="background:url(imagen2.gif) no-repeat 0 0">
<div class="feature-headline">
<h1><a href="#" title="Aphex Twin" rel="external">Aphex Twin</a></h1>
<p>Limerick, Ireland Richard David James (born 18 August 1971), aka ...</p>
</div>
</div>
</div>
<div class="section">
<div class="hp-highlight" style="background:url(imagen3.gif) no-repeat 0 0">
<div class="feature-headline">
<h1><a href="#" title="Roots Manuva" rel="external">Roots Manuva</a></h1>
<p>Rodney Smith (born 1972), better known by his stage name ...</p>
</div>
</div>
</div>
</div>
</body>
</html>
Yo sacaría los estilos a una css externa.
A esto le tendrás que añadir el código que tenías para que al pulsar sobre una imagen, la cargue abajo. No es mas que cambiar el href="#" por href="javascript:visualisar(1);"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Custom - jQuery simplyScroll - Logicbox</title>
<link rel="stylesheet" href="/css/default.css" media="all" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="http://simplyscroll.googlecode.com/files/jquery.simplyscroll-1.0.4.min.js"></script>
<script type="text/javascript">
(function($) {
$(function() {
$("#scroller").simplyScroll({
className: 'custom',
autoMode: 'loop',
pauseOnHover: false,
frameRate: 20,
speed: 2
});
});
})(jQuery);
</script>
<style type="text/css" media="screen">
.custom {
width: 576px;
height: 210px;
background-color: #FFF;
margin-bottom: 1em;
}
.custom .simply-scroll-clip {
width: 576px;
height: 210px;
}
#scroller .section {
float:left;
width: 480px;
height: 210px;
}
#scroller .hp-highlight {
height:210px;
margin:-10px 10px 10px 0;
}
#scroller .feature-headline {
position:relative;
top:140px;
width:432px;
background:white;
margin:10px 10px 20px 10px;
padding:10px 10px 0 10px;
}
#scroller .feature-headline a {
font-weight: bold;
text-decoration: none;
color:#cc0000;
}
#scroller h1 {
font-weight:normal;
font-size:19px;
}
#scroller p {
font-size: 14px !important;
color:#666666;
line-height:130%;
padding:0 0 10px;
}
.simply-scroll-container { /* Container DIV - automatically generated */
position: relative;
}
.simply-scroll-clip { /* Clip DIV - automatically generated */
position: relative;
overflow: hidden;
z-index: 2;
}
.simply-scroll-list { /* UL/OL/DIV - the element that simplyScroll is inited on */
position: absolute;
top: 0;
left: 0;
z-index: 1;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.simply-scroll-list li {
padding: 0;
margin: 0;
list-style: none;
}
.simply-scroll-list li img {
border: none;
display: block;
}
.simply-scroll-btn {
position: absolute;
background-image: url(buttons.png);
width: 42px;
height: 44px;
z-index:3;
cursor: pointer;
}
.simply-scroll-btn-left {
left: 6px;
bottom: 6px;
background-position: 0 -44px;
}
.simply-scroll-btn-left.disabled {
background-position: 0 0 !important;
}
.simply-scroll-btn-left:hover {
background-position: 0 -88px;
}
.simply-scroll-btn-right {
right: 6px;
bottom: 6px;
background-position: 84px -44px;
}
.simply-scroll-btn-right.disabled {
background-position: 84px 0 !important;
}
.simply-scroll-btn-right:hover {
background-position: 84px -88px;
}
.simply-scroll-btn-up {
right: 6px;
top: 6px;
background-position: -126px -44px;
}
.simply-scroll-btn-up.disabled {
background-position: -126px 0 !important;
}
.simply-scroll-btn-up:hover {
background-position: -126px -88px;
}
.simply-scroll-btn-down {
right: 6px;
bottom: 6px;
background-position: -42px -44px;
}
.simply-scroll-btn-down.disabled {
background-position: -42px 0 !important;
}
.simply-scroll-btn-down:hover {
background-position: -42px -88px;
}
/* Custom class modifications - override classees
.simply-scroll is default
*/
.simply-scroll { /* Customisable base class for style override DIV */
width: 576px;
height: 200px;
margin-bottom: 1em;
}
.simply-scroll .simply-scroll-clip {
width: 576px;
height: 200px;
}
.simply-scroll .simply-scroll-list {}
.simply-scroll .simply-scroll-list li {
float: left;
width: 290px;
height: 200px;
}
.simply-scroll .simply-scroll-list li img {}
.simply-scroll .simply-scroll-btn {}
.simply-scroll .simply-scroll-btn-left {}
.simply-scroll .simply-scroll-btn-left.disabled {}
.simply-scroll .simply-scroll-btn-left:hover {}
.simply-scroll .simply-scroll-btn-right {}
.simply-scroll .simply-scroll-btn-right.disabled {}
.simply-scroll .simply-scroll-btn-right:hover {}
.simply-scroll .simply-scroll-btn-up {}
.simply-scroll .simply-scroll-btn-up.disabled {}
.simply-scroll .simply-scroll-btn-up:hover {}
.simply-scroll .simply-scroll-btn-down {}
.simply-scroll .simply-scroll-btn-down.disabled {}
.simply-scroll .simply-scroll-btn-down:hover {}
/* Vertical scroller example */
.vert { /* wider than clip to position buttons to side */
width: 340px;
height: 400px;
margin-bottom: 1.5em;
}
.vert .simply-scroll-clip {
width: 290px;
height: 400px;
}
.vert .simply-scroll-list {}
.vert .simply-scroll-list li {
width: 290px;
height: 200px;
}
.vert .simply-scroll-list li img {}
.vert .simply-scroll-btn {}
.vert .simply-scroll-btn-up { /* modified btn pos */
right: 0;
top: 0;
}
.vert .simply-scroll-btn-up.disabled {}
.vert .simply-scroll-btn-up:hover {}
.vert .simply-scroll-btn-down { /* modified btn pos */
right: 0;
top: 52px;
}
.vert .simply-scroll-btn-down.disabled {}
.vert .simply-scroll-btn-down:hover {}
/* NOTE left-right classes wouldn't be needed on vertical scroller */
/* Flickr example
Images created from a data source use simpler format i.e.
<div>
<img/>
<img/>
...
</div>
*/
.flickr {
width: 576px;
height: 180px;
margin-bottom: 1.5em;
}
.flickr .simply-scroll-clip {
width: 576px;
height: 180px;
}
.flickr .simply-scroll-list img {
float: left;
border: none;
display: block;
}
</style>
</head>
<body>
<div id="scroller">
<div class="section">
<div class="hp-highlight" style="background:url(imagen1.gif) no-repeat 0 0">
<div class="feature-headline">
<h1><a href="#" title="The Prodigy" rel="external">The Prodigy</a></h1>
<p>The Prodigy is an English electronic music group formed by ...</p>
</div>
</div>
</div>
<div class="section">
<div class="hp-highlight" style="background:url(imagen2.gif) no-repeat 0 0">
<div class="feature-headline">
<h1><a href="#" title="Aphex Twin" rel="external">Aphex Twin</a></h1>
<p>Limerick, Ireland Richard David James (born 18 August 1971), aka ...</p>
</div>
</div>
</div>
<div class="section">
<div class="hp-highlight" style="background:url(imagen3.gif) no-repeat 0 0">
<div class="feature-headline">
<h1><a href="#" title="Roots Manuva" rel="external">Roots Manuva</a></h1>
<p>Rodney Smith (born 1972), better known by his stage name ...</p>
</div>
</div>
</div>
</div>
</body>
</html>
Yo sacaría los estilos a una css externa.
A esto le tendrás que añadir el código que tenías para que al pulsar sobre una imagen, la cargue abajo. No es mas que cambiar el href="#" por href="javascript:visualisar(1);"
