I tried a course for JS that made a Hover Gallery project. 5 thumbnails were shown in a line and whichever you hovered, was displayed in a bigger size under them.
Now, the code didn't contain any JS in it, only HTML and CSS. Here it is:
<div class="slider">
<img class="arrow" onclick="sliderBackward()" src="img/left-arrow.png"> // later added
<img onmouseover="preview.src=img1.src" name="img1" class="thumbnail" src="img/1.jpg" alt="1">
<img onmouseover="preview.src=img2.src" name="img2" class="thumbnail" src="img/2.jpg" alt="2">
<img onmouseover="preview.src=img3.src" name="img3" class="thumbnail" src="img/3.jpg" alt="3">
<img onmouseover="preview.src=img4.src" name="img4" class="thumbnail" src="img/4.jpg" alt="4">
<img onmouseover="preview.src=img5.src" name="img5" class="thumbnail" src="img/5.jpg" alt="5">
<img class="arrow" onclick="sliderForward()" src="img/right-arrow.png"> // later added
</div>
<div class="preview">
<img name="preview" src="img/1.jpg">
</div>
My question:
Is using the name attribute this way alright? I think that this mini project is a good example to show features but not one, that should be put in practise in bigger projects. Is that right?
Goal:
I wanted to show the further added thumbnails when I click on an arrow button and hide the other end of the list. (It would always show 5). For this I'm thinking if I should just delete the name attributes and approach it only through JS.
I think its better practice to use id rather than name to create unique identifiers. Name is often used in forms (I believe that's really what its for) and you could have multiple inputs with the same name. ID on the other hand is a very handy way to identify/select elements within the dom and should be unique.
That being said, there is nothing against you using name in this manner, its just not what its for.
Related
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.
I am relatively new to javascript and I'm looking for the best possible way to explain this problem. Hope anyone can give me advice on this
I have this :
<div class="col-md-4">
<img src="">
<img src="">
<img src="">
</div>
When Clicked on img it's redirected to the stuffedd.html page. However this contains 2 columns with images. A vertical thumbnail column and a middle column with large image.
Like this:
<div class="middle containerscroll">
<img src="" id="Mdrie" class="img-responsive ">
<img src="" id="Mvier" class="img-responsive ">
<img src="" id="Mvijf" class="img-responsive ">
</div>
div class="col-md-9 hidden-xs hidden-sm">
<img src="" id="drie" class="img-responsive single">
<img src="" id="vier" class="img-responsive single">
<img src="" id="vijf" class="img-responsive single">
</div>
I got this far with Jquery :
$(document).ready(function(){
"use strict";
$( ".single" ).hide();
$( "#Mdrie" ).on('click',function() {
$('#drie').toggle();
$(".single").not('#drie').hide();
});
How do I make the stuffedd.html open with the image I clicked on in the second div (all the images with class .single)
Do I declare a variable which I fill in as:
$( "var" ).show();
website is: www.damondebacker.com if you need to see it.
If I understand the question, the second page needs to be aware of what you clicked on the previous page, consider adding some identifier into the URL that identifies the image:
<img src="">
Then the second page has a spot to extract it from. If you don't want it in the URL you could set a cookie or use the LocalStorage object.
Try to transfer the ID of the picture on the first page with your URL. So you click on the Image and the link is something like /stuffed.html?id=drie. Later on your stuffed site, you get the parameter with jquery in a variable and show exactly this image. Here is a short tutorial for URL Parameters and jQuery
i am using ng-repeat to populate a image list. i need to use $index for naming the images and use it for replacing src of preview div.
$index is not replacing in mouseover section while its getting replaced in name section. what can be the reason and how to correct it.
<img onmouseover="preview.src=img{{$index}}.src" name="img{{$index}}" src="{{image.SMALL_PATH}}" alt="" ng-repeat="image in images | filter:query"/>
<div class="preview" align="center">
<img name="preview" src="images/img1.jpg" alt=""/>
</div>
Use ng-src and ng-mouseover Your snippet would be
<img data-ng-mouseover="preview.src=image.src" name="image.name" data-ng-src="image.SMALL_PATH" alt="" ng-repeat="image in images | filter:query"/>
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