Galeria de Imagenes con Href

jdag1992 · #1 (**permalink**) 02/06/2015, 08:16

Buenos días. Agregue recientemente una galería a un proyecto que estoy realizando, y la misma funciona perfectamente. Quiero ahora agregar a la galería la opción de cuando le de clic a cualquier imagen la misma se abra en tamaño mas grande.

La galeria esta basada en un Jquery llamado FreeWall que es el que hace la galeria. Reitero que la galeria funciona bien. Pero cuando agrego la etiqueta "a href" las imagenes no aparecen pero el enlace si.

Este es el codigo que tengo

Código:

<!DOCTYPE html>
<html>
	<head>
		<title>Flex layouts demo with freewall</title>
		<meta content="text/html; charset=utf-8" http-equiv="content-type">
		<meta name="description" content="Freewall demo for flex layout" />
		<meta name="keywords" content="javascript, dynamic, grid, layout, jquery plugin, flex layouts"/>
		<link rel="icon" href="favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="../freewall.js"></script>
		<style type="text/css">
			.free-wall {
				margin: 15px;
			}
			.brick img {
				margin: 0;
				display: block;
			}
		</style>
	</head>
	<body>
		<div class='header'>
			<div class="clearfix">
				<div class="float-left">
						<h1><a href="http://vnjs.net/www/project/freewall/">Free Wall</a></h1>
						<div class='target'>Creating dynamic grid layouts.</div>
				</div>
			</div>
		</div>
		<div id="freewall" class="free-wall"></div>
		
		<script type="text/javascript">
			
			var temp = "<div class='brick' style='width:{width}px;'><img src='i/photo/{index}.jpg' width='100%'></div>";
			var w = 1, h = 1, html = '', limitItem = 49;
			for (var i = 0; i < limitItem; ++i) {
				w = 1 + 3 * Math.random() << 0;
				html += temp.replace(/\{width\}/g, w*150).replace("{index}", i + 1);
			}
			$("#freewall").html(html);
			
			var wall = new Freewall("#freewall");
			wall.reset({
				selector: '.brick',
				animate: true,
				cellW: 150,
				cellH: 'auto',
				onResize: function() {
					wall.fitWidth();
				}
			});

			var images = wall.container.find('.brick');
			images.find('img').load(function() {
				wall.fitWidth();
			});

		</script>
	</body>
</html>

En esta parte cuando agrego el href es cuando deja de funcionar...

Código:

var temp = "<div class='brick' style='width:{width}px;'><a href='img/col1/{index}.jpg'><img src='img/col1/{index}.jpg' width='100%'></a></div>";

Cuando coloco esto no aparecen las imagenes pero los enlaces si.

Las imagenes no aparecen y dibujan su ubicacion de esta manera img/col1/{index}.jpg

Alguna ayuda les estaré agradecido