Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

creating elements using .each()?

I want to create a frosted glass effect for an image gallery - that will show a 'clone' of the bottom half of the image, with a blur filter and transparent white background applied to it.

this is an example of what i'm talking about: http://css-tricks.com/frosting-glass-css-filters/

my problem is - I want to write a piece of jQuery code that will dynamically take the original image, duplicate it, and then in my CSS it can apply the blur filter to the duplicated image - that way I don't have to have two versions of each image in my markup, and I'll be able to add new images later, achieving the same effect.

here is my HTML structure: (fairly simple)

<div id="gallery">
        <div class="g11x17 galleryWrapper">
            <img src="img/chancePoster.jpg">
        </div
        ><div class="g11x17 galleryWrapper">
            <img src="img/hopePoster2.jpg">
        </div
        ><div class="g11x17 galleryWrapper">
            <img src="img/tree.jpg">
        </div
        ><div class="g11x17 galleryWrapper">
            <img src="img/dan.jpg">
        </div
        ><div class="g11x17 galleryWrapper">
            <img src="img/tedBig.jpg">
        </div
        ><div class="g11x17 galleryWrapper">
            <img src="img/women.jpg">
        </div>
    </div> 

my CSS:

div.frostedGlass {
    position: absolute;
    height: 50%; 
    width: 100%; 
    background: rgba(255, 255, 255, 0.5);
    bottom: 0;
    overflow: hidden;
}
div.frostedGlass img {
    height: 200%; 
    width: 100%; 
    position: absolute;
    bottom: 0; 
    -webkit-filter: blur(20px); 
}

and here is the jQuery/JS i have written:

var $glass = $('<div class="frostedGlass"></div>');

$glass.appendTo($('.galleryWrapper')); 

$(".gallery img").each(function (){
    $(this).clone().appendTo($glass); 
});

I really though this would iterate through my gallery of images, clone each one, and append it to the newly created $glass div to achieve this effect. However it doesn't work! I fear i'm thinking completely wrong about the issue and need some help!!

1 Answer

theres no need to use $.each. clone() creates a deep copy of the 'set' of matched elements. http://api.jquery.com/clone/