I am trying to code my own image gallery using html css jquery. I have a modal window to show the clicked in images. Inside my modal window I have a previous and next button.
My question is how can i show the previous images or next images when someone click that button.
Here's my jsFiddle
jquery code i am using to show clicked in images.
$(function(){
$('.gallery a').click(function(evt) {
evt.preventDefault( );
var imgPath = $(this).attr('href');
$('.gallery-overlay').show()
.find('.gallery-image').attr('src',imgPath);
return false;
});
});
Add this to your jQuery.
Declare a variable current image in your function and keep current image saved in that variable. Update the variable whenever current image is changed.
Updated jsfiddle
Click on the second image in the images and see the prev and next image then.
$('.gallery-control-previous').click(function(){
var imgPath = current_img.prev().attr('href');
current_img = current_img.prev();
$('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
});
$('.gallery-control-next').click(function(){
var imgPath = current_img.next().attr('href');
current_img = current_img.next();
$('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
});
If you have understood this answer, add checks to the code showing next, prev elemments only when they exist.
You can find how to do that,
here..
Updated.
Get the first child of next row, and pass that.
$('.gallery-control-next').click(function(){
if(current_img.next().length){
current_img = current_img.next();
}else{
current_img = current_img.parents(".row").next(".row").find("a:first");
}
var imgPath = current_img.attr('href');
$('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
});
I have added img_no to each a tag to identify the current active image and get next or previous image
Working Demo
$(function () {
$('.gallery a').click(function (evt) {
evt.preventDefault();
var imgPath = $(this).attr('href');
var img_no = $(this).attr('img_no');
$('.gallery-overlay').show()
.find('.gallery-image').attr('src', imgPath).attr('img_no', img_no);
return false;
});
});
i = 1;
$('.row a img').each(function () {
$(this).attr('img_no', i);
$(this).parents('a').attr('img_no', i);
i++;
});
images_length = i - 1;
console.log(images_length);
$('.gallery-control-next').click(function () {
var img_no = $(this).parent().parent().find('.gallery-image').attr('img_no');
img_no++;
if (img_no > images_length) {
img_no = 1;
}
$('.row a').each(function () {
if ($(this).attr('img_no') == img_no) {
imgPath = $(this).attr('href');
}
});
$('.gallery-imagebox img').attr('src', imgPath).attr('img_no', img_no);
});
$('.gallery-control-previous').click(function(){
var img_no = $(this).parent().parent().find('.gallery-image').attr('img_no');
img_no--;
if (img_no <= 0) {
img_no = images_length;
}
$('.row a').each(function () {
if ($(this).attr('img_no') == img_no) {
imgPath = $(this).attr('href');
}
});
$('.gallery-imagebox img').attr('src', imgPath).attr('img_no', img_no);
});
Related
I have been working on creating a custom javascript thumbnail slider using data-src. Everything is working perfectly just the next button and prev button is not working at all. Any help would be appreciated.
Here is the link to the codepen
https://codepen.io/mandipluitel/pen/BbOXgZ
I am using this code.
$(document).ready(function(e){
$(".thumbnails li").click(function(e){
var thisDataSrc = $(this).attr("data-src");
var thisDataCount = $(this).children().attr("data-count");
if(thisDataSrc == "undefined"){}
else{
$(this).siblings("li").removeClass("active");
$(this).addClass("active");
$(this).parents(".thumbnails").next().find("img").attr("src",thisDataSrc);
$(this).parents(".thumbnails").next().find("span.number").html("" + thisDataCount + "");
}
});
$("button.next").click(function(e) {
var currentDiv = 0;
var newDataSrc = $(this).parents(".slider-hold").prev().find(".active").attr("data-src");
if(newDataSrc == "undefined"){}
else{
currentDiv = currentDiv .next();
currentDiv.siblings("li").removeClass("active");
currentDiv.addClass("active");
currentDiv.parents(".thumbnails").next().find("img").attr("src",newDataSrc);
}
});
});
Help here.
the problem is that currentDiv is set to zero. So when you later set it to currentDiv.next(), it doesn't really do anything.
I belive that the function should start something like this:
$("button.next").click(function(e) {
var currentLi = $("li.active");
var nextLi = currentLi.next();
if (nextLi) {
nextLi.siblings("li").removeClass("active");
nextLi.addClass("active");
$("#large-image").attr("src",nextLi.attr("data-src"));
}
});
I am using the selected images only is going to next page. If I have selected the image like(1,2,3), after this I unselected the image (3). On next page I was getting all the images(1,2,3). I don't want unselected image(3). I have tried localStroage.removeItem but all the images are getting removed. But I want to remove only the unselected image.
<script>
localStorage.clear();
$(document).ready(function () {
$('.blur').on('click', function(){
var $$ = $(this);
if( !$$.is('.checked'))
{
$$.addClass('checked');
$('#imgCheck').prop('checked', true);
documentid =''
var name=$(this).attr('id');
//alert(name);
var test = localStorage.getItem("test");
//alert(test);
var obj = [];
if(test)
{
obj= JSON.parse(test);
}
obj.push({"id": name});
localStorage.setItem("test",JSON.stringify(obj));
console.log(obj);
}
else
{
$$.removeClass('checked');
$('#imgCheck').prop('checked', false);
var name=$(this).attr('id');
//alert(name);
var test = localStorage.removeItem("test");
console.log(image);
}
})
});
please suggest me..
I have 5 link and mini preview photo and url 3 links its good link opsss and upsss is wrong when i click good link i'm going to new page when i click error link attr href change to adresError and then we have popup This only works for the first time second time click all links have a popup and should have only opsss and upsss
http://jsfiddle.net/3ptktp47/1/
Here is my code :
var nameError = [
"opsss",
"upsss",
];
$(function() {
$('#prev').hide();
$(function() {
var title_link = 'kliknij aby podejżeć';
$(".preview-link a")
.attr({title: title_link})
//.tooltip()
.click(function(){
$('.preview-link a img').css('opacity',1);
var sciezka = $(this).attr("href");
var tytul = $(this).attr("title");
var adres = $(this).text();
//alert(adres);
$(".duzy").attr({ src: sciezka, alt: tytul, style:'cursor:pointer;', href:'http://www.'+ adres,'target':'_blank'});
$('.link').html(adres).attr({href:'http://www.'+ adres,'target':'_blank'});
$('#prev').show();
function errorDomain() {
$('.link, .duzy').removeAttr('href');
$('.link, .duzy').click(function(event){
$('#popup, .popup-bg').show('slow');
$('.server_url').html(adresError).attr({href:'http://'+ adresError,'target':'_blank'});
});
};
if(adres == 'opsss.com'){
var adresError = 'x4ql.nazwa.pl/'+ nameError[0];
errorDomain();
}else if(adres == 'upsss.com' ){
var adresError = 'x4ql.nazwa.pl/'+ nameError[1];
errorDomain();
}else{
//$('#popup, .popup-bg').fadeOut();
};
$('.cancel, .popup-bg').click(function(event){
$('#popup, .popup-bg').fadeOut();
});
return false;
});
$('.close').click(function(){
$('#prev').hide();
});
$('.link').mouseover(function(){
$(this).css({style: 'color:#000;'});
});
});
});
EDITED:
Ok, I was able to handle your problem.
Your .click() event in the errorDomain() method was firing every time you clicked this square. I managed it to toggle a class on a.duzy element with toggleClass('error') in your if-statement where you check the address.
Inside your click() event, a if-statement is checking if the .duzy element has class named error with hasClass('error') , this has following result -
TRUE- your popup will be displayed
FALSE - nothing happens
I hope my answer is clear enough, but please check out the edited fiddle.
EDITED SOURCE:
Your errorDomain() Method
function errorDomain() {
$('.link, .duzy').removeAttr('href');
$('.duzy, .link').click(function (event) {
if ($(this).hasClass("error")) {
$('#popup, .popup-bg').show('slow');
$('.server_url').html(adresError).attr({
href: 'http://' + adresError,
'target': '_blank'
});
}
});
}
The if-statements
if (adres == 'opsss.com') {
var adresError = 'x4ql.nazwa.pl/' + nameError[0];
$('a.duzy').toggleClass("error");
errorDomain();
} else if (adres == 'upsss.com') {
var adresError = 'x4ql.nazwa.pl/' + nameError[1];
$('a.duzy').toggleClass("error");
errorDomain();
} else {
$('a.duzy').removeClass("error");
}
Edited fiddle
I have ,
jQuery(function ($) {
var allArrows = $(".arrow"),
arrowUpUrl = "select_arrow_up.png",
arrowDownUrl = "select_arrow.png";
allArrows.click(function () {
var currentUrl = $(this).attr("src");
$(this).attr("src", currentUrl === arrowDownUrl ? arrowUpUrl : arrowDownUrl);
allArrows.not(this).attr("src", arrowDownUrl);
});
});
my problem is when I click outside arrow do not return first position what I must change ?
i can't use css and toggle whit jquery I need to use images with outside place
http://jsfiddle.net/cYCnD/9/
You should add the following handler:
$(document).on('click', function(e) {
if (!$(e.target).hasClass('arrow')) {
$('.arrow').attr('src', 'select_arrow.png');
}
});
See my fiddle: http://jsfiddle.net/cYCnD/10/
The whole code should look like this:
jQuery(function ($) {
var allArrows = $(".arrow"),
arrowUpUrl = "select_arrow_up.png",
arrowDownUrl = "select_arrow.png";
allArrows.click(function () {
var currentUrl = $(this).attr("src");
$(this).attr("src", currentUrl === arrowDownUrl ? arrowUpUrl : arrowDownUrl);
allArrows.not(this).attr("src", arrowDownUrl);
});
$(document).on('click', function(e) {
if (!$(e.target).hasClass('arrow')) {
allArrows.attr('src', 'select_arrow.png');
}
});
});
If I understand you correctly, you want to reset the arrows positions when a user clicks elsewhere on the page.
If so, I believe this will work:
$(document).click(function(e){
if(!$(e.target).hasClass('arrow'))
$(".arrow").attr("src", select_arrow.png)
});
here's the question:
I have a list of images that get loaded via .load( onto a div on my page
$('.widget-top').live("click", function() {
$(".area").load("/galleries/ #projects > li a");
});
they load with this structure:
<img src="photoA.jpg" />
<img src="photoB.jpg" />
<img src="photoC.jpg" />
<img src="photoD.jpg" />
<img src="photoE.jpg" />
I click on the image and the src is retrived and added to a form value like so:
$("#widgets-right .area a").live("click", function() {
$(this).toggleClass('selected');
if ( i === 2){
alert('added to project 1 if you want to add more projects just click the button below');
var title = $(this).attr('title');
$(".title").val(title);
var link = $(this).attr('href');
$(".link").val(link);
var img = $("img", this).attr('src');
$(".img").val(img);
var imgexample = $("img", this).attr('src');
$(".gallery_one").attr("src", imgexample);
}
else{
i --;
alert('added to project'+i);
var title = $(this).attr('title');
$('.title'+i).val(title);
var link = $(this).attr('href');
$('.link'+i).val(link);
var img = $('img', this).attr('src');
$('.img'+i).val(img);
var imgexample = $('img', this).attr('src');
$('.gallery_one'+i).attr("src", imgexample);
i++;
}
});
and as you can see from this line $(this).toggleClass('selected'); it's toggling a class when clicked.
up to here all is good, my problem occurs when i save my form and it get's refreshed via ajax. The images with the selected class now no longer have the selected class because they have been refreshed.
I do have input fields with the current src's of the selected images on page. Is there any way to search through those fields and reapply the class if the src'sin the input fields match the src's of the images that where reloaded via the .load() call?
Chris
You will need to store the currently selected item in a variable and after the images are loaded you need to assign the class back
var selected; // it should be in a context shared between both the methods
$("#widgets-right .area a").live("click", function() {
$(this).toggleClass('selected');
if ( i === 2){
alert('added to project 1 if you want to add more projects just click the button below');
var title = $(this).attr('title');
$(".title").val(title);
var link = $(this).attr('href');
$(".link").val(link);
var img = $("img", this).attr('src');
$(".img").val(img);
selected = img;
var imgexample = $("img", this).attr('src');
$(".gallery_one").attr("src", imgexample);
}
else{
i --;
alert('added to project'+i);
var title = $(this).attr('title');
$('.title'+i).val(title);
var link = $(this).attr('href');
$('.link'+i).val(link);
var img = $('img', this).attr('src');
$('.img'+i).val(img);
selected = img;
var imgexample = $('img', this).attr('src');
$('.gallery_one'+i).attr("src", imgexample);
i ++;
}
});
$('.widget-top').live("click", function() {
$(".area").load("/galleries/ #projects > li a", function(){
if(selected){
$(".area").find('img[src="' + selected + '"]').closest('a').toggleClass('selected');
}
});
});