reducir la cantidad de código necesario al mostrar varias imágenes HTML CSS

solo me pregunto si hay una manera de reducir la cantidad de código necesario cuando se muestran muchas imágenes en HTML.

Quiero mostrar alrededor de 2-300 imágenes en una galería, y en este momento el HTML se verá así:

<div id="scroller>
    <img src="/Content/images/decking/decking-1.jpg" width="100" alt="" />
    <img src="/Content/images/decking/decking-2.jpg" width="100" alt="" />
    <img src="/Content/images/decking/decking-3.jpg" width="100" alt="" />
    <img src="/Content/images/decking/decking-4.jpg" width="100" alt="" />
    <img src="/Content/images/decking/decking-5.jpg" width="100" alt="" />
</div>

...pero hasta la imagen "decking-250.jpg".

¿Hay alguna forma más eficiente de mostrar las imágenes para que no tenga más de 250 líneas de HTML "img src"?

La única parte del nombre del archivo que cambia es el "-1", "-2", "-3", etc. El resto, incluida la etiqueta Alt, puede permanecer vacío.

Estoy construyendo este sitio en ASP.Net MVC3 Razor usando los tutoriales en línea de ASP.net como guía si eso ayuda a que se me ocurra alguna solución, o si simplemente tiene que hacerse de esa manera, también está bien. Me preguntaba si ¿Había otro enfoque que debería considerar para aprender?

Muchas gracias de antemano.

preguntado el 02 de julio de 12 a las 11:07

2 Respuestas

Esta es la forma en que funciona HTML. No puedes reducir eso, ya que necesitas uno. img etiqueta para cada imagen. Puede crear ese código dinámicamente a través de PHP, JS, …. Pero al final obtendrás una larga lista de img etiquetas, tal vez envueltas individualmente por otras etiquetas (por ejemplo, en una lista).

Respondido 02 Jul 12, 11:07

Gracias Feeela, agradezco la explicación. Estoy feliz de dejarlo en paz, ya que la pregunta simplemente preguntaba si había una mejor manera de hacerlo (y no sé casi nada sobre cómo escribir algo en PHP o JS para hacer es para mi). - Harry

Estoy de acuerdo con Feela, y aunque puede parecer detallado, su código es tan a prueba de balas como parece. Sin embargo, si algo como JS es algo que puede usar (o ya está usando), hay opciones. Esto no está probado, pero puede configurar una instrucción de bucle for en Jquery/Javascript que podría condensar el código. Por ejemplo:

for (i=1; i < 250; i++) {
    $('#scroller').append('<img src="/Content/images/decking/decking-' + i.toString() + '.jpg" width="100" alt="" />');
}

No soy un codificador ASP, pero tal vez proporcione algo funcionalmente similar.

Respondido 02 Jul 12, 13:07

Gracias @Shrug, también investigaré ese método, veré si puedo hacer que algo funcione. - Harry

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.