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
Le Var Range
Front End Web Development Techdegree Student 18,011 PointsI need help with my click event for my photo gallery to shuffle threw the images with arrow click
// JavaScript Document
// appending div to the body //
var $wrapper = $("<div class='wrap'></div>");
var $photoViewer = $("<div class='photoview'></div>");
var $image = $("<img class='pic'/>");
var $arrow1 = $("<img class='arrow1' src='icon/arrows.svg'/>");
var $arrow2 = $("<img class='arrow2' src='icon/arrows-1.svg'/>");
var $textContainer = $("<div class='captionText'></div>");
var $para = $("<p></p>");
var $overlay = $("<div class='overlay'></div>");
var $main = $(".pic-nav li a");
var $current;
//**************************************aPpEnDiNg ***********************************//
$photoViewer.append( $image );
$photoViewer.append($arrow1).append( $arrow2 );
$textContainer.append( $para );
$wrapper.append( $photoViewer ).append( $textContainer );
$overlay.append( $wrapper );
$("body").append( $overlay );
$overlay.hide();
/***************************************************************/
// iMaGe CliCk FuNcTiOn ShOwInG oVeRlAy //
$main.click( function(e) {
e.preventDefault();
var imageLoc = $(this).attr("href");
$current = $(this).parent();
$image.attr("src", imageLoc);
$overlay.show();
var captionTex = $(this).children("img").attr("alt");
$para.text( captionTex );
});
/********************** cLiCk FuNcTiOn ThAt GeTs RiD Of OvErLaY ************* */
$overlay.click( function(e) {
e.preventDefault();
$overlay.hide();
});
/******************************************************************************/
$arrow1.click( function(e) {
e.preventDefault();
var $nxtImg = $current.next();
var $nextSrc = $nxtImg.children("img").attr("src");
var $nextLocation = $main.attr("href", $nextSrc );
$image.attr("src", $nextLocation );
var $nextCapTex = $nxtImg.children("img").attr("alt");
$para.text( $nextCapTex );
$current = $nxtImg;
});
``` jQuery
``` html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/normalize.css"/>
<link href='https://fonts.googleapis.com/css?family=Fanwood+Text' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/grey_poupon.css"/>
<title>Photo Gallery</title>
</head>
<body>
<header class="main-head">
<input type="text" name="search" id="search" placeholder="enter a selection"/>
</header>
<div class="photo-container clearfix">
<ul class="pic-nav ">
<li><a href="img/01.jpg"><img src="img/thumb-img/01.jpg" alt="Hey Bales I love hay bales. Took this snap on a drive through the countryside past some straw fields."/></a></li>
<li><a href="img/02.jpg"><img src="img/thumb-img/02.jpg" alt="Lake The lake was so calm today. We had a great view of the snow on the mountains from here."/></a></li>
<li><a href="img/03.jpg"><img src="img/thumb-img/03.jpg" alt="Canyon I hiked to the top of the mountain and got this picture of the canyon and trees below."/></a></li>
<li><a href="img/04.jpg"><img src="img/thumb-img/04.jpg" alt=" Iceberg It was amazing to see an iceberg up close, it was so cold but didn't snow today."/></a></li>
<li><a href="img/05.jpg"><img src="img/thumb-img/05.jpg" alt="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons"/></a></li>
<li><a href="img/06.jpg"><img src="img/thumb-img/06.jpg" alt="Fall Fall is coming. I love when the leaves on the trees start to change color."/></a></li>
<li><a href="img/07.jpg"><img src="img/thumb-img/07.jpg" alt="Plantation I drove past this plantation yesterday, everything is so green!"/></a></li>
<li><a href="img/08.jpg"><img src="img/thumb-img/08.jpg" alt="Dunes My summer vacation to the Oregon Coast. I love the sandy dunes!"/></a></li>
<li><a href="img/09.jpg"><img src="img/thumb-img/09.jpg" alt="Countryside Lane We enjoyed a quiet stroll down this countryside lane."/></a></li>
<li><a href="img/10.jpg"><img src="img/thumb-img/10.jpg" alt="Sunset Sunset at the coast! The sky turned a lovely shade of orange."/></a></li>
<li><a href="img/11.jpg"><img src="img/thumb-img/11.jpg" alt="Cave I did a tour of a cave today and the view of the landscape below was breathtaking."/></a></li>
<li><a href="img/12.jpg"><img src="img/thumb-img/12.jpg" alt="Bluebells I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in."/></a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>
``` html
thanks.
3 Answers
Le Var Range
Front End Web Development Techdegree Student 18,011 Pointsyes because I updated it ... I really need help in finding how to get this click event working for the arrows in my photo gallery
// JavaScript Document
// appending div to the body //
var $wrapper = $("<div class='wrap'></div>");
var $photoViewer = $("<div class='photoview'></div>");
var $image = $("<img class='pic'/>");
var $arrow1 = $("<img class='arrow1' src='icon/arrows.svg'/>");
var $arrow2 = $("<img class='arrow2' src='icon/arrows-1.svg'/>");
var $textContainer = $("<div class='captionText'></div>");
var $para = $("<p></p>");
var $overlay = $("<div class='overlay'></div>");
var $main = $(".pic-nav li a");
var $current = $(".pic-nav li " );
//**************************************aPpEnDiNg ***********************************//
$photoViewer.append( $image );
$photoViewer.append($arrow1).append( $arrow2 );
$textContainer.append( $para );
$wrapper.append( $photoViewer ).append( $textContainer );
$overlay.append( $wrapper );
$("body").append( $overlay );
$overlay.hide();
/***************************************************************/
// iMaGe CliCk FuNcTiOn ShOwInG oVeRlAy //
$main.click( function(e) {
e.preventDefault();
var imageLoc = $(this).attr("href");
$current = $(this).parent();
$image.attr("src", imageLoc);
$overlay.show();
var captionTex = $(this).children("img").attr("alt");
$para.text( captionTex );
});
/********************** cLiCk FuNcTiOn ThAt GeTs RiD Of OvErLaY ************* */
$overlay.click( function(e) {
e.preventDefault();
$overlay.hide();
});
/******************************************************************************/
$arrow1.click( function(e) {
e.preventDefault();
var $nxtImg = $current.next();
var $nextSrc = $nxtImg.children("img").attr("src");
var $nextLocation = $main.attr("href", $nextSrc );
$(".pic-nav li ").children("img").attr("src", $nextLocation );
var $nextCapTex = $nxtImg.children("img").attr("alt");
$para.text( $nextCapTex );
$current = $nxtImg;
});
```
Le Var Range
Front End Web Development Techdegree Student 18,011 Pointsthis is what I have done so far
Le Var Range
Front End Web Development Techdegree Student 18,011 Pointshttps://github.com/varlerang/interactive_photoGall.git
here is the github to my photo gallery project.
Steven Parker
231,198 PointsSteven Parker
231,198 PointsThis question appears to be a duplicate of this one.