Desarrollo y diseño

Galería scroll horizontal + ¿"smart loading"?

B
[Borrado] #1 Abr '12

Buenas, el término de smart loading creo que me lo acabo de inventar pero ahora lo explico.
Tengo dos dudas:

1º.- Llevo un par de semanas liado con mi web personal, y ahora me he quedado estancado y soy incapaz de dar con las palabras adecuadas para que Google me ayude, y acabo en páginas que explican cosas que a priori me parecen más complejas que las que busco.

Lo que quiero es un scroll horizontal donde se vayan pasando imágenes. Este es el concepto, como veréis muy sencillo:

http://i.imgur.com/wKIJs.jpg

Nota: La hilera de imágenes se prolonga hacia la derecha y me gustaría que apareciesen de la misma manera que lo hacen en esta web. Aunque según me comentásteis esta web está hecha en flash y estoy huyendo del flash.

2.- Mi segunda pregunta es acerca del ¿smart loading?. Me he sacado de la manga este término para referirme a aquellas webs que tienen imágenes, y solo se cargan cuando el usuario se acerca a ellas usando la flecha del scroll o alguna interacción por el estilo (el ejemplo que he puesto anteriormente tiene esto que os comento).

A ver si algún entendido puede echarme una mano, gracias.

1
Merkury
Merkury #2 Abr '12

#1 Buenas, vayamos por partes.

Lo que tu buscas se llama horizontal slide te dejo el link a uno muy sencillote aqui
Básicamente es un plugin de jquery y solo tienes que maquetar el HTML, como te indica el ejemplo (puedes añadir cuantas imágenes te apetezcan) y luego ajustar el CSS como mejor te guste.

La segunda parte lo la precarga que muestras en esa página la hacen con flash y no se exactamente muy bien como lo hacen, pero con Javascript o Jquery se puede hacer, básicamente controlando la posición del slider y los tiempos , no se prueba a buscar cosas como "loading effect" y luego lo juntas con el slider :D.

Espero que te sirva de ayuda.

1 respuesta
B
[Borrado] #3 Abr '12

#2 Muchas gracias, mañana le daré caña y por la tarde comentaré a ver qué tal. Soy un negado con todo lo que vaya más allá de HTML/CSS (incluso con HTML también la cago mucho), a ver si consigo adaptarlo, espero que no haya ningún problema en que mis imágenes, a diferencia del ejemplo del link que me has puesto, no sean todas iguales.

1 respuesta
Merkury
Merkury #4 Abr '12

#3 Lo unico que tienes que hacer para que las imagenes casen es:

a) Cambiar el CSS

o

b) Redimensionar las imágenes.

Luego repasa el script del slider, porque lleva un timer para que vayan moviéndose las imágenes.

eXtreM3
eXtreM3 #5 Abr '12

http://nivo.dev7studios.com/

scumah
scumah #6 Abr '12

Pues yo creo que él lo que quiere es un contenedor de imágenes con scroll horizontal, no un slider xD

#1 Lo del "smart loading" lo llaman "lazy loading", es complicado que se te ocurra xD Hay un montón de plugins para eso, pero este es el que me mola a mí.

Te he montado un ejemplo para que veas como lo haría yo. Entra en http://jsfiddle.net/bGF75/1/ y dale al play.

El html es sencillo:

<div id="slider">
    <ul>
        <li>
            <img class="lazy" src="http://placehold.it/1/ffffff/ffffff" data-original="http://placehold.it/200" width="200" height="200" />
        </li>
        ...
        <li>
            <img class="lazy" src="http://placehold.it/1/ffffff/ffffff" data-original="http://placehold.it/200" width="200" height="200" />
        </li>
    </ul>
</div>&#8203;

En el src de las imágenes debes poner la imagen que se vaya a mostrar antes de que se cargue la real, ya sea un png transparente, una imagen de carga o lo que quieras. En data-original pones la ruta real de la imagen. En width y height, evidentemente, el tamaño :P

El css está en el fiddle y tiene poco que explicar (Si tienes alguna duda te la aclaro), y en el JS:

// Obtenemos la anchura del #slider ul sumando la anchura de todas las imágenes que contiene
var _width = 0;

$('#slider li img').each(function(index) {
    _width += $(this).outerWidth();
});

$('#slider ul').css('width', _width);

// Aplicamos el plugin jquery.lazyload.js para la carga de imágenes automática
$('img.lazy').lazyload({
    container: $('#slider'),
    effect : "fadeIn"
});&#8203;

Lo primero que hago es poner el ancho a la lista de imágenes, que dependerá de lo que midan las imágenes y de cuantas sean. Después aplico el plugin que te dije antes para que se carguen las imágenes solas cuando entren en el campo de visión del usuario.

Y toma efecto chupi en dos patadas.

1 4 respuestas
B
[Borrado] #7 Abr '12

#6 Eso es justamente lo que buscaba, justo justo. Gracias por currarte el código. Voy a crear un html nuevo para practicarlo ahí, y cuando me funcione a ver si consigo meterlo adecuadamente en la web. Luego editaré con los resultados espero que buenos ^.

Pregunta noob, esta parte de Javascript ¿dónde la meto?:

var _width = 0;

$('#slider li img').each(function(index) {
    _width += $(this).outerWidth();
});

$('#slider ul').css('width', _width);

$('img.lazy').lazyload({
    container: $('#slider'),
    effect : "fadeIn"
});&#8203;

Yo la estoy poniendo tal que así:

<script type="text/javascript">
var _width = 0;

$('#slider li img').each(function(index) {
    _width += $(this).outerWidth();
});

$('#slider ul').css('width', _width);

$('img.lazy').lazyload({
    container: $('#slider'),
    effect : "fadeIn"
});&#8203;
</script>

En el body.

1 respuesta
RaCe
RaCe #8 Abr '12

#7 hay dos formas, ambas deben situarse entra las etiquetas <head></head>

  1. ponerlo entero: 
    <script type="text/javascript">
var _width = 0;

$('#slider li img').each(function(index) {
    _width += $(this).outerWidth();
});

$('#slider ul').css('width', _width);

$('img.lazy').lazyload({
    container: $('#slider'),
    effect : "fadeIn"
});?
</script>
    1. linkarlo desde un archivo: 
      <script type="text/javascript" src="script.js"></script>
      y dentro de script.js: 
      var _width = 0;

$('#slider li img').each(function(index) {
    _width += $(this).outerWidth();
});

$('#slider ul').css('width', _width);

$('img.lazy').lazyload({
    container: $('#slider'),
    effect : "fadeIn"
});?
      suerte
1 respuesta
B
[Borrado] #9 Abr '12

#8 Mmm, lo estoy haciendo así en un html nuevo (para que no interfiriese nada) y no me sale. Las imágenes no aparecen. Así me sale:

http://i.imgur.com/gxjES.jpg

El código es el siguiente:

spoiler
1 respuesta
RaCe
RaCe #10 Abr '12

#9 Creo que te olvidas de incluir el jQuery y el plugin de lazyload que ha puesto #6

esto, si funciona:

spoiler

Si quieres bajatelos a local:
lazyload
jquery

y linkalos desde el archivo como te explicado, método 2

1 1 respuesta
B
[Borrado] #11 Abr '12

Aaaahora! Jajaja, la ignorancia no tiene límites y en mi caso se cumple a la perfección. Claro si no linkeo a jquery y al plugin no estoy haciendo nada. Muchas gracias a todos especialmente #6 y #10 me habéis echado una gran mano!

Bueno, ahora voy a ver si puedo qutar el scroll verticla, y el scroll horizontal cambiarlo a uno personalizado. Muchas gracias os debo una ^.

1 respuesta
scumah
scumah #12 Abr '12

#11 ¡Me alegro de que te sirva hombre! Siento no haberte contestado antes, que estoy currando y no lo había visto xd

B
[Borrado] #13 Abr '12

Cuando tengas tiempo pásate por este enlace link que puedes aprender a construirte tu propia galería, ajeno a plugins externos. Es muy fácil.

1
B
[Borrado] #14 Abr '12

Buenas de nuevo. Como he comentado antes el siguiente "reto" era eliminar el scroll vertical y dejar solo el horizontal (eso lo conseguí fácilmente con un sencillo overflow-y: hidden;
). Así que el siguiente paso era conseguir que no apareciese el scroll por defecto del navegador/windows, sino personalizarlo para que quedara como en la foto que puse: http://i.imgur.com/wKIJs.jpg

Bueno, si bien seguro que hay maneras más sencillas que se me escapan, lo estoy haciendo gracias a este plugin: http://jscrollpane.kelvinluck.com/index.html#examples

El problema que tengo es que no lo hago funcionar correctamente, esto es:

  • Me aparece de nuevo el scroll vertical.
  • Me desaparece el scroll horizontal.

Aquí pongo un resumen del código implicado en este plugin de jquery:

Parte implicada de HTML
Parte implicada de Javascript
Parte implicada de CSS

Luego hay un montón de CSS que te descargas del link, que hace referencia al plugin en sí. Pero creo que eso no influye en el problema que estoy teniendo. Aún así lo pongo:

CSS referente al plugin

Tal y como lo tengo según el código puesto me sale tal que así:

http://i.imgur.com/8sm9T.jpg

He probado cambiando ciertos valores en el CSS referente a #slider. Pero el problema se me escapa, esto es solo apto para entendidos -_-.

1 respuesta
B
[Borrado] #15 Abr '12

¿Nadie sabe? Alomejor lo estoy complicando con jquery cuando se puede hacer de una manera más sencilla.

scumah
scumah #16 Abr '12

#14 Al ser un id (#) y no una clase (.), la llamada al plugin de jScroll ese debería ser así:

$('#slider').jScrollPane();&#8203;

Aunque parece que extrañamente te funciona xD

Por otra parte, para que las imágenes se pongan siempre una al lado de la otra y no salten abajo (Al estar flotando a la izquierda) tienes que asignarle al '#slider ul' un ancho suficiente para que quepan todas las imágenes, en tu caso, 2100px (10 imágenes de 210px de ancho cada una):

#slider ul {
  width: 2100px;
}

Ese es el motivo por el que el slider tiene scroll vertical y no horizontal.

Te quedará algo así: http://jsfiddle.net/6ERZW/1/

1 1 respuesta
B
[Borrado] #17 Abr '12

#16 Wow!, una vez más has sacado la varita y me lo has arreglado a la primera como si fuera fácil, muchas gracias Scumah, eres un crack ^. Ya dispongo de mi scroll horizontal.

Pero ahora se me han abierto dos guerras más en cuanto a la usabilidad y funcionalidad de la galería.

Una es que el plugin llamado jquery.mousewheel.js (utilizado para que el contenido con scroll de la web se pueda mover con la rueda del ratón) me ignora completamente. Uso este script, solo que con mi id #slider , y por supuesto el plugin "<script type='text/javascript' src="jquery.mousewheel.js"></script>".

Y la otra guerra es que no sé cómo se llama esta funcionalidad es decir, pulsar en las imágenes y que avance y retroceda hacia la imagen. Y como no se cómo buscarlo en Google no se cómo intentar hacerlo. ¿Será con anchors horizontales + javascript para que sea más suave?

B
[Borrado] #18 May '12

Buenas. Bumpeo este hilo porque me lleva fallando unos días el código que puso Scumah en #6 y no se por qué. Hablo de plugin de Lazyload, cuando hay un solo contenedor implicado, me funciona a la perfección, ejemplo:

$(window).load(function(){
var _width = 0;

$('#slider1 li img').each(function(index) {
    _width += $(this).outerWidth();
});

$('#slider1 ul').css('width', _width);

$('img.lazy').lazyload({
container: $('#slider1'),
effect : "fadeIn"
});
});

Pero cuando quiero implicar a otro scroll que está debajo del primero no me funciona.

He probado añadiendo el contenedor de esta manera:

$(window).load(function(){
var _width = 0;

$('#slider1 li img, #slider2 li img').each(function(index) {
    _width += $(this).outerWidth();
});

$('#slider1 ul, #slider2 ul').css('width', _width);

$('img.lazy').lazyload({
container: $('#slider1, #slider2'),
effect : "fadeIn"
});
});

O llamando al script dos veces tal que así:

$(window).load(function(){
var _width = 0;

$('#slider1 li img, #slider2 li img').each(function(index) {
    _width += $(this).outerWidth();
});

$('#slider1 ul, #slider2 ul').css('width', _width);

$('#slider1 img.lazy').lazyload({
    container: $('#slider1'),
    effect : "fadeIn"
});

$('#slider2 img.lazy').lazyload({
    container: $('#slider2'),
    effect : "fadeIn"
});
});

Alomejor el plugin Lazyload no puede actuar dos veces en una misma página, no lo sé.

Usuarios habituales

Tags