diff options
Diffstat (limited to 'files/es/learn/javascript/building_blocks/image_gallery/index.html')
| -rw-r--r-- | files/es/learn/javascript/building_blocks/image_gallery/index.html | 145 |
1 files changed, 0 insertions, 145 deletions
diff --git a/files/es/learn/javascript/building_blocks/image_gallery/index.html b/files/es/learn/javascript/building_blocks/image_gallery/index.html deleted file mode 100644 index a4bad1842e..0000000000 --- a/files/es/learn/javascript/building_blocks/image_gallery/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Galería de imágenes -slug: Learn/JavaScript/Building_blocks/Image_gallery -translation_of: Learn/JavaScript/Building_blocks/Image_gallery -original_slug: Learn/JavaScript/Building_blocks/Galeria_de_imagenes ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div> - -<p class="summary"><span class="tlid-translation translation" lang="es"><span title="">Ahora que hemos analizado los bloques de construcción fundamentales de JavaScript, pongamos a prueba tu conocimiento de bucles, funciones, condicionales y eventos, creando un elemento que comumente vemos en muchos sitios web, una </span> <span title="">Galería de imágenes "motorizada" por JavaScript .</span></span></p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisitos:</th> - <td>Antes de intentar esta evaluación deberías de haber trabajado con todos los artículos en éste módulo.</td> - </tr> - <tr> - <th scope="row">Objetivo:</th> - <td>Evaluar la comprensión de los bucles, funciones, condicionales y eventos de JavaScript..</td> - </tr> - </tbody> -</table> - -<h2 id="Punto_de_partida">Punto de partida</h2> - -<p>Para realizar esta evaluación, debería descárgarse <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true">archivoZip</a> para el ejemplo, descomprímalo en algún lugar de su computadora y haga el ejercicio localmente para empezar.</p> - -<p>Opcionalmente, puedes usar un sitio como <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a href="https://glitch.com/">Glitch</a> para realizar tu evaluación. Puede pegar el HTML, CSS y JavaScript dentro de uno de estos editores online. <span class="tlid-translation translation" lang="es"><span title="">Si el editor en línea que está utilizando no tiene paneles JavaScript / CSS separados, siéntase libre de ponerlos en línea <script> / <style> elementos dentro de la página HTML.</span></span></p> - -<div class="blockIndicator note"> -<p><strong>Nota</strong>: Si se atascascas con algo, entonces pregúntenos para ayudarlo — vea la sección de {{anch("evaluación o ayuda adicional")}} al final de esta página.</p> -</div> - -<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2> - -<p>Ha sido provisto con algún contenido de HTML, CSS e imágenes, también algunas líneas de código en JavaScript; necesitas escribir las líneas de código en JavaScript necesatio para transformarse en un programa funcional. El HTML body luce así:</p> - -<pre class="brush: html"><h1>Image gallery example</h1> - -<div class="full-img"> - <img class="displayed-img" src="images/pic1.jpg"> - <div class="overlay"></div> - <button class="dark">Darken</button> -</div> - -<div class="thumb-bar"> - -</div></pre> - -<p>El ejemplo se ve así:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13787/gallery.png" style="display: block; margin: 0 auto;"></p> - -<ul> -</ul> - -<p>Las partes más interesantes del archivo example's CSS :</p> - -<ul> - <li>It absolutely positions the three elements inside the <code>full-img <div></code> — the <code><img></code> in which the full-sized image is displayed, an empty <code><div></code> that is sized to be the same size as the <code><img></code> and put right over the top of it (this is used to apply a darkening effect to the image via a semi-transparent background color), and a <code><button></code> that is used to control the darkening effect.</li> - <li>It sets the width of any images inside the <code>thumb-bar <div></code> (so-called "thumbnail" images) to 20%, and floats them to the left so they sit next to one another on a line.</li> -</ul> - -<p>Your JavaScript needs to:</p> - -<ul> - <li>Loop through all the images, and for each one insert an <code><img></code> element inside the <code>thumb-bar <div></code> that embeds that image in the page.</li> - <li>Attach an <code>onclick</code> handler to each <code><img></code> inside the <code>thumb-bar <div></code> so that when they are clicked, the corresponding image is displayed in the <code>displayed-img <img></code> element.</li> - <li>Attach an <code>onclick</code> handler to the <code><button></code> so that when it is clicked, a darken effect is applied to the full-size image. When it is clicked again, the darken effect is removed again.</li> -</ul> - -<p>To give you more of an idea, have a look at the <a href="http://mdn.github.io/learning-area/javascript/building-blocks/gallery/">finished example</a> (no peeking at the source code!)</p> - -<h2 id="Steps_to_complete">Steps to complete</h2> - -<p>The following sections describe what you need to do.</p> - -<h3 id="Looping_through_the_images">Looping through the images</h3> - -<p>We've already provided you with lines that store a reference to the <code>thumb-bar <div></code> inside a constant called <code>thumbBar</code>, create a new <code><img></code> element, set its <code>src</code> attribute to a placeholder value <code>xxx</code>, and append this new <code><img></code> element inside <code>thumbBar</code>.</p> - -<p>You need to:</p> - -<ol> - <li>Put the section of code below the "Looping through images" comment inside a loop that loops through all 5 images — you just need to loop through five numbers, one representing each image.</li> - <li>In each loop iteration, replace the <code>xxx</code> placeholder value with a string that will equal the path to the image in each case. We are setting the value of the <code>src</code> attribute to this value in each case. Bear in mind that in each case, the image is inside the images directory and its name is <code>pic1.jpg</code>, <code>pic2.jpg</code>, etc.</li> -</ol> - -<h3 id="Adding_an_onclick_handler_to_each_thumbnail_image">Adding an onclick handler to each thumbnail image</h3> - -<p>In each loop iteration, you need to add an <code>onclick</code> handler to the current <code>newImage</code> — this handler should find the value of the <code>src</code> attribute of the current image. Set the <code>src</code> attribute value of the <code>displayed-img <img></code> to the <code>src</code> value passed in as a parameter.</p> - -<h3 id="Writing_a_handler_that_runs_the_darkenlighten_button">Writing a handler that runs the darken/lighten button</h3> - -<p>That just leaves our darken/lighten <code><button></code> — we've already provided a line that stores a reference to the <code><button></code> in a constant called <code>btn</code>. You need to add an <code>onclick</code> handler that:</p> - -<ol> - <li>Checks the current class name set on the <code><button></code> — you can again achieve this by using <code>getAttribute()</code>.</li> - <li>If the class name is <code>"dark"</code>, changes the <code><button></code> class to <code>"light"</code> (using <code><a href="/en-US/docs/Web/API/Element/setAttribute">setAttribute()</a></code>), its text content to "Lighten", and the {{cssxref("background-color")}} of the overlay <code><div></code> to <code>"rgba(0,0,0,0.5)"</code>.</li> - <li>If the class name not <code>"dark"</code>, changes the <code><button></code> class to <code>"dark"</code>, its text content back to "Darken", and the {{cssxref("background-color")}} of the overlay <code><div></code> to <code>"rgba(0,0,0,0)"</code>.</li> -</ol> - -<p>The following lines provide a basis for achieving the changes stipulated in points 2 and 3 above.</p> - -<pre class="brush: js">btn.setAttribute('class', xxx); -btn.textContent = xxx; -overlay.style.backgroundColor = xxx;</pre> - -<h2 id="Hints_and_tips">Hints and tips</h2> - -<ul> - <li>You don't need to edit the HTML or CSS in any way.</li> -</ul> - -<h2 id="Assessment_or_further_help">Assessment or further help</h2> - -<p>If you would like your work assessed, or are stuck and want to ask for help:</p> - -<ol> - <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>.</li> - <li>Write a post asking for assessment and/or help at the <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Your post should include: - <ul> - <li>A descriptive title such as "Assessment wanted for Image gallery".</li> - <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li> - <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li> - <li>A link to the actual task or assessment page, so we can find the question you want help with.</li> - </ul> - </li> -</ol> - -<p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li> -</ul> |