1 Attachment(s)
How do you make a horizontal scrolling photo gallery in Javascript?
I have already created the UI for this project. See attached screenshot. The gallery will contain 6 images at a time. I still need to insert a right/left arrow icons for scrolling. So each time an arrow is clicked, I want the gallery to scroll 6 new images. I already have javascript code that loads an entire form with images from the file system. So I'm assuming just to show 6 images at a time an array would be needed or some kind of container object. My problem is I'm just not sure how to create that scrolling effect in the way that I've described. Please help!
Thanks,
Re: How do you make a horizontal scrolling photo gallery in Javascript?
Hello,
This code can working try it...
HTML
Code:
<span class='arrow-left'>left</span>
<span class='arrow-right'>right</span>
<div class='row offer-pg-cont'>
<div class='offer-pg'>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
</div>
</div>
JS
Code:
$(document).ready(function() {
//cache our items and containers
var items = $(".portfolio-item");
var scrollContainer = $(".offer-pg-cont");
function fetchItem(container, items, isNext) {
var i,
scrollLeft = container.scrollLeft();
//set isNext default to true if not set
if (isNext === undefined) {
isNext = true;
}
if (isNext && container[0].scrollWidth - container.scrollLeft() <= container.outerWidth()) {
//we reached the last one so return the first one for looping:
return $(items[0]);
}
//loop through items
for (i = 0; i < items.length; i++) {
if (isNext && $(items[i]).position().left > 0) {
//this item is our next item as it's the first one with non-negative "left" position
return $(items[i]);
} else if (!isNext && $(items[i]).position().left >= 0) {
//this is our previous item as it's the one with the smallest negative "left" position
//if we're at item 0 just return the last item instead for looping
return i == 0 ? $(items[items.length - 1]) : $(items[i-1]);
}
}
//nothing found
return null;
}
/**
* Moves the scrollcontainer to the next/previous item (depending on event.data.direction).
*
* @param event
*/
function moveToItem(event) {
//fetch the next/previous item:
var isNext = event.data.direction == "next";
var item = isNext ? fetchItem(scrollContainer, items, true) : fetchItem(scrollContainer, items, false);
if (item) {
//scroll to item
scrollContainer.animate({"scrollLeft": item.position().left + scrollContainer.scrollLeft()}, 400);
}
}
//bind events
$(".arrow-left").click({direction: "prev"}, moveToItem);
$(".arrow-right").click({direction: "next"}, moveToItem);
});
CSS
Code:
.offer-pg-cont{
width: 100%;
overflow-x: auto;
margin: 0px;
}
span.arrow-left,span.arrow-right{
display: block;
position: absolute;
background-color: #555;
top: 40px;
color:white;
z-index: 2;
cursor: pointer;
}
span.arrow-left{
left: 0px;
}
span.arrow-right{
right: 0px;
}
span.arrow-left:hover,.offer-pg span.arrow-right:hover{
background-color: #333;
}
.offer-pg{
width: 1500px;
}
.item-wrapper.offer-con{
background-color: #333 !important;
}
.offer-con .left-item h4 {
color: #fff;
font-weight: normal;
margin: 0px;
}
.offer-con .right-item{
float: right;
padding: 10px;
}
.offer-con .right-item h5{
color: #cb9944;
margin: 0px;
font-size: 14px;
}
.offer-pg > .portfolio-item{
width: 100px;
background-color:blue;
margin-left:10px;
float:left;
}
http://jsfiddle.net/jbrosi/c6kf2/
Re: How do you make a horizontal scrolling photo gallery in Javascript?
