Week 7:

JavaScript Photo Gallery


This photo gallery has been updated to have the code further optimized. Rather than referring to the image explicitely by its filename, it is using the value from the src attribute of the img tag. We can further optimize this by pulling the caption from the alt attribute of the thumbnail image.

Pulled Pork Tacos with Cilantro and White Onions.
Grilled Chicken Tacos with Pico de Gallo.
Grilled Chicken Tacos with Fancy Crema and Red Onions.
You can never have too many limes for your tacos.
Carne Asada is by far my favorite taco.
Big image of tacos

Grilled Chicken Tacos with Pico de Gallo. 


<script>
    document.querySelector("#thumb1").addEventListener("mouseover", function(){
        this.style.opacity = 1;
    });
    document.querySelector("#thumb1").addEventListener("mouseout", function(){
        this.style.opacity = 0.5;
    });
    document.querySelector("#thumb1").addEventListener("click", function(){
        document.querySelector("#mainimg").src = this.src;
        document.querySelector("#imgcaption").innerHTML = this.getAttribute("alt");
    });

    document.querySelector("#thumb2").addEventListener("mouseover", function(){
        this.style.opacity = 1;
    });
    document.querySelector("#thumb2").addEventListener("mouseout", function(){
        this.style.opacity = 0.5;
    });
    document.querySelector("#thumb2").addEventListener("click", function(){
        document.querySelector("#mainimg").src = this.src;
        document.querySelector("#imgcaption").innerHTML = this.getAttribute("alt");
    });

    document.querySelector("#thumb3").addEventListener("mouseover", function(){
        this.style.opacity = 1;
    });
    document.querySelector("#thumb3").addEventListener("mouseout", function(){
        this.style.opacity = 0.5;
    });
    document.querySelector("#thumb3").addEventListener("click", function(){
        document.querySelector("#mainimg").src = this.src;
        document.querySelector("#imgcaption").innerHTML = this.getAttribute("alt");
    });

    document.querySelector("#thumb4").addEventListener("mouseover", function(){
        this.style.opacity = 1;
    });
    document.querySelector("#thumb4").addEventListener("mouseout", function(){
        this.style.opacity = 0.5;
    });
    document.querySelector("#thumb4").addEventListener("click", function(){
        document.querySelector("#mainimg").src = this.src;
        document.querySelector("#imgcaption").innerHTML = this.getAttribute("alt");
    });

    document.querySelector("#thumb5").addEventListener("mouseover", function(){
        this.style.opacity = 1;
    });
    document.querySelector("#thumb5").addEventListener("mouseout", function(){
        this.style.opacity = 0.5;
    });
    document.querySelector("#thumb5").addEventListener("click", function(){
        document.querySelector("#mainimg").src = this.src;
        document.querySelector("#imgcaption").innerHTML = this.getAttribute("alt");
    });
</script>

Resources