Cuando accedemos a clases se guarda como una colección de objetos HTML. Accedemos mediante el método getElementsByClassName. Para verlo bien lo mejor es un ejemplo.
var descripcioncategoria = document.getElementsByClassName("term-description");
En la variable descripcion corta hemos guardado los elementos que se encuentran en el HTML de la página web que hemos accedido que son de la clase term-descripcion (en concreto era un <div class="term-descripcion">).
En este caso solo había un div con esta clase con lo cual para acceder al HTML que hay dentro lo haremos de la siguiente manera:
var descripcioncategoria = document.getElementsByClassName("term-description")[0].innerHTML;
Aquí le estamos indicando que queremos acceder al primer elemento de la colección de objetos.
Aunque esto puede parecer obvio la falta de habito o el desconocimiento de esto nos puede crear mucha pérdida de tiempo, dolores de cabeza y frustración.
Otro dato a tener en cuenta aquí es que cuando se quiere añadir algo con innerHTML se usa las " " , como siempre lo mejor es ver un ejemplo de como se hace :
var descripcioncategoria = document.getElementsByClassName("term-description")[0].innerHTML=descripcioncategoria+" pues ya ves"
En este ejemplo he hecho sobrecarga en la variable descripcioncategoria guardando a ella misma más el texto nuevo que he añadido, en este caso el " pues ya ves".
sábado, 11 de noviembre de 2017
jueves, 9 de noviembre de 2017
One month JQuery: Como se hace un set de imagenes en Lightbox y que es
En JQuery lightbox que es una libreria JQuery para presentaciones de imágenes se puede realizar un set de estas, un set es un conjunto de imagenes supuestamente de misma tématica en la cual puedes navegar entre ellas mediante los cursores. Para eso simplemente en el campo data-lightbox deben de tener el mismo nombre todas las fotos que pertenezcan a ese set. He aquí un ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Summer Vacation</title>
<!-- CSS -->
<link href="styles.css" rel="stylesheet">
<link href="lightbox2-master/dist/css/lightbox.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<span>— My Trip to —</span>
<h1>The Golden State</h1>
</header>
<!-- Thumbnail Images -->
<a href="assets/images/image1.jpg" data-lightbox="roadtrip" data-title="Surfing">
<img src="assets/thumbnails/thumb1.jpg" alt="Surfing"/>
</a>
<a href="assets/images/image2.jpg" data-lightbox="roadtrip" data-title="Lifeguard Stand">
<img src="assets/thumbnails/thumb2.jpg" alt="Lifeguard Stand"/>
</a>
<a href="assets/images/image3.jpg" data-lightbox="roadtrip" data-title="Hot Air Balloon">
<img src="assets/thumbnails/thumb3.jpg" alt="Hot Air Balloon"/>
</a>
<a href="assets/images/image4.jpg" data-lightbox="roadtrip" data-title="Field Freedom">
<img src="assets/thumbnails/thumb4.jpg" alt="Field Freedom"/>
</a>
<a href="assets/images/image5.jpg" data-lightbox="roadtrip" data-title="Golden Gate Bridge">
<img src="assets/thumbnails/thumb5.jpg" alt="Golden Gate Bridge"/>
</a>
<a href="assets/images/image6.jpg" data-lightbox="roadtrip" data-title="Pacific Ocean Sunset">
<img src="assets/thumbnails/thumb6.jpg" alt="Pacific Ocean Sunset"/>
</a>
</div>
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="lightbox2-master/dist/js/lightbox.js"></script>
<script>
lightbox.option({
'positionFromTop': 100,
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Summer Vacation</title>
<!-- CSS -->
<link href="styles.css" rel="stylesheet">
<link href="lightbox2-master/dist/css/lightbox.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<span>— My Trip to —</span>
<h1>The Golden State</h1>
</header>
<!-- Thumbnail Images -->
<a href="assets/images/image1.jpg" data-lightbox="roadtrip" data-title="Surfing">
<img src="assets/thumbnails/thumb1.jpg" alt="Surfing"/>
</a>
<a href="assets/images/image2.jpg" data-lightbox="roadtrip" data-title="Lifeguard Stand">
<img src="assets/thumbnails/thumb2.jpg" alt="Lifeguard Stand"/>
</a>
<a href="assets/images/image3.jpg" data-lightbox="roadtrip" data-title="Hot Air Balloon">
<img src="assets/thumbnails/thumb3.jpg" alt="Hot Air Balloon"/>
</a>
<a href="assets/images/image4.jpg" data-lightbox="roadtrip" data-title="Field Freedom">
<img src="assets/thumbnails/thumb4.jpg" alt="Field Freedom"/>
</a>
<a href="assets/images/image5.jpg" data-lightbox="roadtrip" data-title="Golden Gate Bridge">
<img src="assets/thumbnails/thumb5.jpg" alt="Golden Gate Bridge"/>
</a>
<a href="assets/images/image6.jpg" data-lightbox="roadtrip" data-title="Pacific Ocean Sunset">
<img src="assets/thumbnails/thumb6.jpg" alt="Pacific Ocean Sunset"/>
</a>
</div>
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="lightbox2-master/dist/js/lightbox.js"></script>
<script>
lightbox.option({
'positionFromTop': 100,
})
</script>
</body>
</html>
Suscribirse a:
Entradas (Atom)