I am trying to figure out how to show and hide some images depending on the clicked element with one of the events of Slick.
<div class="items" id="icons-tabs">
<a href="javascript:void(0)" class="item iconClicked" data-tab="tab0">
<img src="/researchicon.png" alt="" class="img-active">
<img src="/researchKOSelected.svg" alt="" class="img-inactive">
</a>
<a href="javascript:void(0)" class="item iconClicked" data-tab="tab1">
<img src="/WideRange.png" alt="" class="img-active">
<img src="/WideRangeUpSelected.svg" alt="" class="img-inactive">
</a>
<a href="javascript:void(0)" class="item iconClicked" data-tab="tab2">
<img src="/SSI_toolbox.png" alt="" class="img-active">
<img src="/toolboxKOSelected.svg" alt="" class="img-inactive">
</a>
<a href="javascript:void(0)" class="item iconClicked" data-tab="tab3">
<img src="/PricingIcon.png" alt="" class="img-active">
<img src="/PricingIconUpSelected.svg" alt="" class="img-inactive">
</a>
</div>
As you see in that markup, there are some images with the class img-active which are the images that the user will see when the document is ready.
That set of images looks like this:
All I need is that when you click over the image, it must hide the current one and show the image with the class img-inactive, so it must be like a kind swap of classes between img-inactive and img-active.
This what I have done so far:
$mobSlick.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$('a[data-tab="tab'+nextSlide+'"] > img')
.first()
.addClass('img-inactive')
.removeClass('img-active');
$('a[data-tab="tab'+currentSlide+'"] > img')
.first()
.addClass('img-active')
.removeClass('img-inactive');
$('a[data-tab="tab'+nextSlide+'"] > img')
.not(":eq(0)")
.addClass('img-active')
.removeClass('img-inactive');
$('a[data-tab="tab'+currentSlide+'"] > img')
.not(":eq(0)")
.addClass('img-inactive')
.removeClass('img-active');
});
The problem with this code is that it works almost fine when you click the items from left to right, but when you do it from right to left or with no order at all, it crashes.
Any suggestions?
You are making this way too hard.
First of all, inline javascript (href="javascript:void(0)") is not a good tactic and you should use Content Security Policy to make sure it's not run any inline stuff.
Second I believe what you want is way too simple for the script you have written. You just need to insert style="display:none;" on img-inactive images and the following jquery code.
`$('.iconClicked').click(function() {
$(this).children().toggle();
});`
Then again you could insert some animation to it, like fade. To do that you should position the images absolutely, so each pair is on the same spot. You add transition on the opacity attribute of the images and with jquery you toy with opacity as needed.
If you simultaneously set one to opacity 1 and the other to 0, then the images will be semitransparent for a while. To prevent this, you should set one image to opacity 1 and set a timer (with setTimout) to then change the other to 0.
Edit:
You can also use toggleClass('img-active img-inactive'); instead of plain toggle(). This will interchange the classes. I vaguely understand your exact problem, so if this does not answer your question, maybe you should give some more info.
Related
I have a container of images populated when the page is requested with the images available in a certain directory (so number of images is variable) using the Thymeleaf rendering framework:
<div id="lightgallery">
<a th:each="i : ${content.images}}"><img th:src="i"></a>
</div>
When doing that all images are displayed on the page below each other (while I would like to only display the first image as a place holder). When I click on one of them, the light gallery opens with the images as thumbnails.
I would like to now hide all images except the first one, which will be the place holder for the gallery. Clicking it will then open the gallery, where the placeholder image becomes the first image of the gallery. Kind of like such:
<div id="lightgallery">
<a><img src="first.png"></a>
<a th:each="img, i : ${content.images}}" th:if="${i > 0}"><img th:src="i"></a>
</div>
You can make it cleaner by rendering the first image together with the loop. Consider declaring a CSS class 'hidden' for display: none and use the it for second images onwards
<div id="lightgallery">
<a th:each="image, iter : ${content.images}" th:class="${!iter.first} ? hidden">
<img th:src="${image}">
</a>
</div>
You can use the property ${i.first} to tell if it's the first image. Here is how I would do it:
<div id="lightgallery">
<a th:href="${content.images[0]}"><img th:src="${content.images[0]}" /></a>
<a th:href="${image}"
style="display: none;"
th:each="image, i: ${content.images}"
th:unless="${i.first}"><img th:src="${image}" /></a>
</div>
I'm looking for a javascript option that will allow me to mouseover a thumbnail image to replace the "large" image. The trick here is using the anchor href from the thumbnail link as the large image source. I need this to work for multiple instances.
The <img src="large1.jpg"> etc. can be removed if that helps
Below is a simplified version of the HTML code I am using. This code cannot be changed.
Every id and class can be unique.
<div class="image-1">
<img src="large1.jpg">
</div>
<div id="thumbs">
<a id="thumb_1" href="large1.jpg" title="1"><img src="small1.jpg" alt="image 1"/></a>
<a id="thumb_2" href="large2.jpg" title="2"><img src="small2.jpg" alt="image 1"/></a>
<a id="thumb_3" href="large3.jpg" title="3"><img src="small3.jpg" alt="image 1"/></a>
</div>
...
<div class="image-2">
<img src="large2.jpg">
</div>
<div id="thumbs">
<a id="thumb_1" href="another_large1.jpg" title="1"><img src="anout_small1.jpg" alt="image 1"/></a>
<a id="thumb_2" href="another_large2.jpg" title="2"><img src="another_small2.jpg" alt="image 1"/></a>
<a id="thumb_3" href="another_large3.jpg" title="3"><img src="another_small3.jpg" alt="image 1"/></a>
</div>
...
check this solution
http://jsfiddle.net/dtdaynjp/
add to all "large" image unique class, image-1, image-2, image-3..
for each thumbs link add class similar like appropriate large image: thumb-image-1, thumb-image-2, thumb-image-1...
add this jQuery code:
$(function() {
$(".mouseover a").mouseover(function(){
var src=$(this).attr('href');
var classs=$(this).attr('class');
classs=classs.substr(6);
$('.'+classs).find('img').attr('src',src);
})
})
I would just use the CSS :hover selector. Then you can add animations and other cool things to your images.
EXAMPLE HERE.
I’m searching for a way to display the next and previous slideshow image within the Twitter Bootstrap Carousel.
As per default it just show the current image and if I remove the display:none css property it has every item in the carousel below each other. I’ve tried to play with the CSS but haven’t got it to work.
The idea is to display the current slideshow image in the middle and then the next and previous image with opacity, not necessarily clickable.
I’ve tried different slideshows and carousels but can’t seem to find anyone which satisfies these requirements and some of those who come close will not adapt to the responsive design that Bootstrap provides.
Normally when I’m using the carousel with multiple items, I just group e.g. images within the <div class="item"> div like:
<div class="item active">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
<div class="item">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
<div class="item">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
But this will not do what I want because it rotates all three items at the time and not take one image each.
Any suggestion, advice, or link for some walk-through or tutorial will be very much appreciated.
Cheers
This is the link that helped me
Twitter Bootstrap 101: The Carousel
I have this for changing the background image of div.fullscreen:
<div id="swatches">
<a href="http://www-03.ibm.com/ibm/history/exhibits/storage/images/PH3380A.jpg">
<img src="http://www.wmagency.co.uk/wp-content/uploads/2011/04/test.jpg"
onmouseover="document.images['bigPic'].src='http://josefsipek.net/docs/s390- linux/hercules-s390/ssh-dasd1.png';"
width="72" height="54" alt="Item ksc1" />
</a>
</div>
However, is there a way to change the background image of a table on hover of another image link?
Sure, look at an example here.
This is done by giving the img an id and the table an id. Then we listen for when the mouse is over the img and when it does, change the background-image of the table.
Only want to use inline JavaScript? Use this:
<div id="swatches">
<a href="http://www-03.ibm.com/ibm/history/exhibits/storage/images/PH3380A.jpg">
<img src="http://www.wmagency.co.uk/wp-content/uploads/2011/04/test.jpg"
onmouseover='document.getElementById("table_id_here").style["background-image"]="url(\'http://www.gravatar.com/avatar/\');'
width="72" height="54" alt="Item ksc1" />
</a>
</div>
I'm having a problems with these event. I'm not sure what is the best to use. I'm trying to do some opacity animation depending on where the mouse is.
I have these structure
<div class="thumbnail-wrapper">
<a href="#">
<img class="thumb" src="image/image1.png" />
</a>
<a href="#">
<img class="thumb" src="image/image2.png" />
</a>
<a href="">
<img class="thumb" src="image/image3.png" />
</a>
<a href="#">
<img class="thumb" src="image/image4.png" />
</a>
<a href="#">
<img class="thumb" src="image/image5.png" />
</a>
</div>
Basically, what i want to do is whenever the mouse enters the image, the rest of the images (other than the where the mouse is) will do animate opacity change ie: $(img).stop().not(this).animate({"opacity":"0.4"})
and where the one mouse is will animate to opacity:1.
Please help what is the best approach to this. I tried hover but i was unsuccessful.
TIA
I'd suggest to use .delegate()help for binding an event handler to the wrapping div.thumbnail-wrapper. Catching all mouseenter events from the <img> nodes there. Use .fadeTo()help and .siblings()help to accomplish the task.
Example:
$('div.thumbnail-wrapper').delegate('a', 'mouseenter', function(e) {
$(this).stop(1,0).fadeTo('fast', 1).siblings().stop(1,0).fadeTo('fast', 0.2);
});
Demo: http://www.jsfiddle.net/qR2NU/2/
(I'm using div nodes in the example, you would need to replace div with img in the .delegate() arguments)
$('.thumbnail-wrapper img') //all images under the wrapper
.bind('mouseenter',function (){//when mouseenter,blur me,focus my siblings
$(this).animate({"opacity":"0.4"}).siblings().animate({"opacity":"1"});
}).bind('mouseleave',function (){// when mouse out, default state or (make me sober as i call it )
$(this).animate({"opacity":"1"})
});
$('.thumbnail-wrapper img').hover(function(){
$(this).siblings().animate({'opacity': 0.4});
}, function(){
$(this).siblings().animate({'opacity': 1});
});