Currently, I am working on creating a basic jquery gallery viewer.
In my code, I have the following structure:
<div class="photoset">
<img />
<img />
</div>
<div class="photoset">
<img />
<img />
<img />
</div>
The objective is to show only one image at a time and allow users to click on the right half of the current image to switch to the next one.
This is what I've implemented so far:
$(document).ready(function () {
var counter = 0,
$items = $('.photoset figure'),
numItems = $items.length;
var showCurrent = function () {
var itemToShow = Math.abs(counter % numItems);
$items.removeClass('show');
$items.eq(itemToShow).addClass('show');
};
$("div").click(function (e) {
var pWidth = $(this).innerWidth();
var pOffset = $(this).offset();
var x = e.pageX - pOffset.left;
if (pWidth / 2 > x) {
counter--;
showCurrent();
}
else {
counter++;
showCurrent();
}
});
});
Although the click functionality works, all the divs are affected by it and there seems to be an issue with how the counter is functioning.
Here is the part of the code responsible for generating the gallery:
@foreach (var item in Model)
{
<br />
@Html.DisplayFor(modelitem => item.GalleryName)
<br />
<div class="photoset">
@{ var images = item.ImagePaths;}
@for (var i = 0; i < Enumerable.Count(images); i++)
{
<br />
<figure class="@(i == 0 ? "show" : "" ) ">
<img src="~/images/@Html.DisplayFor(modelImage => images[i].FileName)" alt="" height="300" width="500" />
</figure>
<br />
}
</div>
I apologize if the solution appears obvious, as I am new to jQuery/JavaScript myself.