How to change image and link with data values in Javascript? - javascript

I start learn Javascript and I need your help.
I have big image and under big image there are 3 thumbnails. If user click second thumbnail, big image has to changes to second data-bigimage.
And swipebox link has to change to second data-original image. The same for other images.
HTML:
<div class="profile-gallery">
<div class="profile-gallery_top js-bigImg">
<a href="img/bigImg1.jpg" class="swipebox">
<img class="profile-bigImage" src="img/bigImg.jpg" alt=""/>
</a>
</div>
<ul class="profile-thumbs">
<li><img src="img/imgThmubs1.jpg" data-bigimage="img/bigImg1.jpg" data-original="img/origImg1.jpg" alt=""/></li>
<li><img src="img/imgThmubs2.jpg" data-bigimage="img/bigImg2.jpg" data-original="img/origImg2.jpg" alt=""/></li>
<li><img src="img/imgThmubs3.jpg" data-bigimage="img/bigImg3.jpg" data-original="img/origImg3.jpg" alt=""/></li>
</ul>

jQuery(document).ready(function( $ ) {
$('.profile-thumbs li').click(function(){
var imageurl = $(this).children('img').data('bigimage');
var imageorig = $(this).children('img').data('original');
$('.profile-bigImage').attr("src", imageurl);
$('.swipebox').attr("href", imageorig);
});
});
$(this) is always the clicked element in a click function matching the selector.

This may do the stuff, try this:
$(".profile-thumbs li img").click(function() {
var bigImg = $(this).data("bigimage"),
original = $(this).data("original");
$(".swipebox").attr("href", original);
$(".profile-bigImage").attr("src", bigImg);
});

look at the below example using jQuery.
`$(this)` will refer the image clicked.
so $(this).attr('src') will be the source of the image which we click.
assign it to the image which is having class profile-bigImage
$('img').click(function(){
var imgsrc=$(this).attr('src');
$('.profile-bigImage').attr('src',imgsrc);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="profile-gallery">
<div class="profile-gallery_top js-bigImg">
<a href="img/bigImg1.jpg" class="swipebox">
<img class="profile-bigImage" src="img/bigImg.jpg" alt=""/>
</a>
</div>
<ul class="profile-thumbs">
<li><img src="img/imgThmubs1.jpg" data-bigimage="img/bigImg1.jpg" data-original="img/origImg1.jpg" alt=""/></li>
<li><img src="img/imgThmubs2.jpg" data-bigimage="img/bigImg2.jpg" data-original="img/origImg2.jpg" alt=""/></li>
<li><img src="img/imgThmubs3.jpg" data-bigimage="img/bigImg3.jpg" data-original="img/origImg3.jpg" alt=""/></li>
</ul>

You can try something like that, it should work
$(document).on('click','.profile-thumbs img', function(event) {
event.preventDefault();
$('.profile-gallery-top a').attr('href', $(this).data('original'));
$('.profile-gallery-top img').attr('src', $(this).data('bigimage'));
});

Related

Make img thumbnail gallary to work in php

When I insert some php code to make this dynamic. The problem becomes that when the website refreshes there i cant get to have a image preselected. How can I make that when I refresh the site a img is from UL is preselected.
Html:
<html>
<div>
<div class="Vareside">
<div class="Venstredel">
<div class="Bildeholder">
<img src="Bilder/1.jpg" alt="">
</div>
<div class="ProduktBilder">
<ul class="p_ul">
<li class="p_li"><img src="Bilder/1.jpg" alt=""></li>
<li class="p_li"><img src="Bilder/2.jpg" alt=""></li>
<li class="p_li"><img src="Bilder/3.jpg" alt=""></li>
<li class="p_li"><img src="Bilder/1.jpg" alt=""></li>
</ul>
</div>
</div>
</html>
Script:
<script>
$(document).ready(function() {
$("ul li img").click(function(){
var CurrentImageURL = $(this).attr("src");
$(".Bildeholder img").attr("src", CurrentImageURL)
});
});
</script>

J Carousel Bullet Controls

I am trying to input the bullet function on my JCarousel. All banners are appearing back-end, but when trying to navigate the banners using the bullet function does not work. The bullets are visible but are inactive. Any idea on the function code to rectify this and enable the buttons to function to allow me to click on different banners? Or even a point in the right direction?
<div class="banners">
<div class="pager jcarousel-control"><a class="jcarousel-next" href="#">1</a>23</div>
<div class="holder">
<div class="slider">
<ul>
<li><img src="{{media url="wysiwyg/Banners/Fluke-Fibre-Process.jpg"}}" alt="" /></li>
<li><img src="{{media url="wysiwyg/Banners/Dymo_XTL_Banner.jpg"}}" alt="" /></li>
<li><img src="{{media url="wysiwyg/Fluke_DTX_Buy_Back_2015.jpg"}}" alt="" /></li>
</ul>
</div>
</div>
</div>
Please provide a Fiddle so that we can assist.
In the meantime try;
(function ($) {
$(function () {
$('.jcarousel').jcarousel();
$('.jcarousel-pagination')
.on('jcarouselpagination:active', 'a', function () {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'a', function () {
$(this).removeClass('active');
})
.jcarouselPagination();
});
})(jQuery);
As used on the official example here: http://sorgalla.com/jcarousel/examples/basic/#4

Using jquery, how to change div position depending on variable

I'm trying to create a simple slider
I have main images and thumbnails
I want to animate the thumbnails container to the right position, put i don't want to use integer i want to use width value from a variable
My HTML code is some thing like that
<div class="Slider" >
<ul class="main-image">
<li><img src="images/gal-1.jpg" alt=""/></li>
<li><img src="images/gal-2.jpg" alt=""/></li>
<li><img src="images/gal-3.jpg" alt=""/></li>
</ul>
<div class="thumbnails-holder">
<a class="prev"></a>
<div class="thumbnails-items">
<a class="thumbnails-item">
<img src="images/gal-1.jpg" alt=""/>
</a>
<a class="thumbnails-item">
<img src="images/gal-2.jpg" alt=""/>
</a>
<a class="thumbnails-item">
<img src="images/gal-3.jpg" alt=""/>
</a>
</div>
<a class="next"></a>
</div>
</div>
My J query code
var ThumbWidth = parseInt($(".thumbnails-item").width());
$(".next").click(function(){
$(this).parents().find(".thumbnails-items").animate({
right: '-=95'
})
})
is there a way to write it like right: '-=ThumbWidth'
var ThumbWidth = parseInt($(".thumbnails-item").width());
$(".next").click(function() {
$(this).parents().find(".thumbnails-items").animate({
right: '-=' + ThumbWidth
});
});

Jquery Auto Slider with buttons

Can anyone recommend any good product auto slider with buttons. I am new to jquery so any good easy jquery slider would be fine. I am looking to build this kind of slider
.And when click on the image then it should open the clicked image with description like this . Any help of how can i make this slider would be appreciated thanks in the advance.
popup: colorbox
slider: elastislide-responsive-carousel
http://jsfiddle.net/ckraoftt/1/
HTML:
<div class="column">
<ul id="carousel" class="elastislide-list">
<li><img src="img44" alt="image04" /></li>
<li><img src="img33" alt="image03" /></li>
<li><img src="img22" alt="image02" /></li>
<li><img src="img11" alt="image01" /></li>
</ul>
</div>
JQ:
$( '#carousel' ).elastislide( {
orientation : 'vertical'
} );
$('#carousel a').colorbox({photo :true});
EDIT2:
http://jsfiddle.net/ckraoftt/7/
for all a tag add 2 attr:
data-txt="image 4 4000$" //text after image
data-button-url="http://test.com/shop/4" //url for button Shop
JQ
$( '#carousel' ).elastislide( {
orientation : 'vertical'
} );
$('#carousel a').colorbox({
html:function(){
var src=$(this).attr('href');
var txt=$(this).attr('data-txt');
var url=$(this).attr('data-button-url');
var img='<img src="'+src+'">';
var text= '<div class="pp_txt">'+txt+'</div>';
var btn='<a class="pp_btn" href="'+url+'">SHOP</a>';
var html='<div class="popup">'+img+text+btn+'</div>';
return html;
}

simple jquery slider menu

I am trying to achieve a simple menu slider that works like this:
$(document).ready(function() {
// hide slider images on page load \\
$('.sImage1, .sImage2,.sImage3, .sImage4').hide();
// slide sImage1 on page load\\
$('.sImage1').delay(500).slideDown(1000);
// provide slider image click functionallity \\
$('.sOpen1').click(function() {
// close any already open images \\
$('.sImage2, .sImage3, .sImage4').slideUp(500);
// open/close sImage1 \\
$('.sImage1').stop().slideToggle(500);
}); //end click 1
$('.sOpen2').click(function() {
$('.sImage1, .sImage3, .sImage4').slideUp(500);
$('.sImage2').stop().slideToggle(500);
}); //end click 2
$('.sOpen3').click(function() {
$('.sImage1, .sImage2, .sImage4').slideUp(500);
$('.sImage3').stop().slideToggle(500);
}); //end click 3
$('.sOpen4').click(function() {
$('.sImage1, .sImage2, .sImage3').slideUp(500);
$('.sImage4').stop().slideToggle(500);
}); //end click 4
}); // end ready
html:
<div id="menuSlider">
<ul>
<li class="sOpen1">Course Information</li>
<li class="sImage1"><img src="#" /></li>
<li class="sOpen2">Membership</li>
<li class="sImage2"><img src="#" /></li>
<li class="sOpen3">Equipment</li>
<li class="sImage3"><img src="#" /></li>
<li class="sOpen4">Golf Lessons</li>
<li class="sImage4"><img src="#" /></li>
</ul>
</div>
At the moment I only have 4 images to display but it could become 10 or more and so im guessing there is an easier way of achieving the same without so many lines of code?
I'm still learning javascript and jquery, but if some could point me in the direction of a good tutorial on how to achieve the same using an array or similar, it would be much appreciated.
You could reduce this to :
$(document).ready(function() {
$('.sImage').hide();
$('.sImage:first').delay(500).slideDown(1000); //slide down the first image
$('.sOpen').click(function() { //register the handler for .sOpen as a common click event
$('.sImage')
.not(
$(this).next().slideToggle(500) //SlideUp other images except the one next to the clicked element which will be slideToggled
).slideUp(500);
});
});
changing your markup: (Remove the indexes on the classes for the trigger as well as the content li elements)
<div id="menuSlider">
<ul>
<li class="sOpen">Course Information</li>
<li class="sImage"><img src="#" /></li>
<li class="sOpen">Membership</li>
<li class="sImage"><img src="#" /></li>
<li class="sOpen">Equipment</li>
<li class="sImage"><img src="#" /></li>
<li class="sOpen">Golf Lessons</li>
<li class="sImage"><img src="#" /></li>
</ul>
</div>
With this you can add as many number of new items without changing/adding new classnames, handlers etc.
Demo
See
.next()
.not()
try looking here:
www.w3schools.com/jquery/jquery_animate.asp
www.w3schools.com/css3/css3_animations.asp
Perhaps even easier would be, if you simply use jQuery's UI Accordion.
Then you could have simply:
$(function () {
$("#menuSlider").accordion();
});
and then (using h and div tags):
<div id="menuSlider">
<h3>Course Information</h3>
<div>
<img src="#" />
</div>
<h3>Membership</h3>
<div>
<img src="#" />
</div>
<h3>Equipment</h3>
<div>
<img src="#" />
</div>
<h3>Golf Lessons</h3>
<div>
<img src="#" />
</div>
</div>

Categories

Resources