I am trying to mouseover a thumbnail image and have the larger image of that thumbnail appear below. I know I can target each thumbnail individually, but I would like to use 'this' so I am able to apply the code to any image that I add later. Explanations are greatly appreciated. Thank you! :)
HTML CODE
<div id="gallery">
<ul>
<li><img id="image1" src="images/image1-thumbnail.jpg" alt="#"></li>
<li><img id="image2" src="images/image2-thumbnail.jpg" alt="#"></li>
<li><img id="image3" src="images/image3-thumbnail.jpg" alt="#"></li>
</ul>
<img id="main-image" src="images/image1.jpg" alt="#">
</div>
Javascript Code
This is how I was originally trying to do it. I gave a class of 'image' and 'data-' to each anchor tag (this isn't written in the above HTML code), but it only applies the changes to one thumbnail (whatever number I replace [0] with, and I don't know how to add more numbers), but I believe the best way to achieve what I'm looking to do is by using 'this' and I don't know how to use it.
var image = document.getElementsByClassName('image')[0];
var mainImage = document.getElementById('main-image');
image.onmouseover = function () {
mainImage.src = image.getAttribute('data-mainimage');
mainImage.alt = image.alt;
};
var image = document.getElementsByClassName('image');
var mainImage = document.getElementById('main-image');
[].forEach.call(image,function(img){
img.onmouseover = function(){
mainImage.src = img.parentNode.href;
};
});
getElementsByClassName returns a set of elements, so you have to iterate over them..
Related
I have an image in my webpage i want when the user click on the image the current image also appear in the other div i have in my web page i am totally confuse please help me out here is my code.
<div id="img"><img src="download1.jpg"></div>
<div><img src="" class="img2"></div>
<img src="download1.jpg" alt="" class="imgs" id="the_id" width="180" height="60" />
<script type="text/javascript">
$(document).ready(function() {
$('.imgs').click(function(){
var idimg = $(this).attr('id');
var srcimg = $(this).attr('src');
alert('ID is: '+ idimg+ '\n SRC: '+ srcimg);
$(".img2").attr('src',srcimg);
});
});
</script>
Fiddle
Tried using a fiddle and it works, here is the code which I used.
HTML
<div id="img"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTgAVjAiDPV-oy-o9mvdHEsVoACUKJIuFcn08RJ5kRYINY4oqjPcA"></div>
<div><img src="" class="img2"></div>
<div>click me </div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTgAVjAiDPV-oy-o9mvdHEsVoACUKJIuFcn08RJ5kRYINY4oqjPcA" alt="" class="imgs" id="the_id" width="180" height="60" />
Jquery
$(document).ready(function() {
$('.imgs').click(function(){
var idimg = $(this).attr('id');
var srcimg = $(this).attr('src');
alert('ID is: '+ idimg+ '\n SRC: '+ srcimg);
$(".img2").attr('src',srcimg);
});
});
your code is perfect and will work check out you jquery library that is loaded correctly or not I have not seen any error in your code.
You can achieve this by setting the destination image's src to the same as the img src in the clicked div. Try:
$('.source-img').on('click', function(){
var src = $(this).children('img').attr('src');
$('#destination').children('img').attr('src', src);
});
Check out this jsFiddle.
If you want the images to not have wrappers, then just change the jQuery targetting and leave out the .children(img) part.
If you're looking for a better method, see this JSFiddle
It uses the clone function
$('.imgs').click(function(){
$(this).clone().appendTo('#LoadImageHere').attr('id', 'ClonedImage');
});
It means you don't have an image with an empty src attribute lying around, and you can add attributes to the cloned image as you wish (I added an ID in the example).
If you try width this code or here combination you can get very interesting result.Plz look" . Div element have in self img tag width source image,class "img2". Other image in gallery must have equal id, like is id "the_id". And if we clicking any picture that picture is show in space of div tag. How you can get bouncing effect picture must have equal size. I make combination two div tag where firs have class "img2", and second where is my picture distribute my pictures. With this first code on this page I make nice image gallery. Try and you self, this is not hard.
I really like this slider sample HERE!. But I want to do is assign next/previous onclick command on images display on right side like this:
Instead of clicking those DOTS. I want to assign the onclick EVENT on images(RED BOXES).
How can I tweak that one.
Thank you in advance!
I've simply changed the $navDots variable to point to the images on line 90 of js.
var navDots = $('.nav-images');
this.$navDots = navDots.children( 'img' );
Then use this HTML:
<div class="nav-images">
<img src="http://lorempixel.com/400/200/city" alt="img01" width="100px"/>
<img src="http://lorempixel.com/400/200/business" alt="img02" width="100px"/>
<img src="http://lorempixel.com/400/200/technics" alt="img03" width="100px"/>
<img src="http://lorempixel.com/400/200/people" alt="img04" width="100px"/>
<img src="http://lorempixel.com/400/200/nature" alt="img05" width="100px"/>
<img src="http://lorempixel.com/400/200/sports" width="100px"/>
</div>
Hope it helps! Please see codepen example as well!. http://codepen.io/anon/pen/corjw
Disclaimer
Please do link to the non-minified source of the plugin, so you can modify that file directly. Currently, the plugin handles all the elements inside the #cbp-fwslider area. It may not be advisable to hack from outside, which is what this solution is...
Solution
It looks like you can mimic this by hiding the dots (which is what the plugin uses by default) and using your two elements to trigger click events on the dots. The currently active dot is indicated by a cbp-fwcurrent, so something like $('#cbp-fwslider .cbp-fwdots .cbp-fwcurrent') would select the current dot. Use jQuery's next() and prev() calls check if the relevant dot exists, and then do a $el.trigger('click').
Code Outline (untested)
$('#fwdButton').click(function() {
var $dot = $('#cbp-fwslider .cbp-fwdots .cbp-fwcurrent'),
$nextDot = $dot.next();
if ($nextDot) {
$nextDot.trigger('click');
}
});
`
I am trying to find a easy way of making a pop-up box that uses the image al-ready in a link using function (this);.
however I would like to change the size of the image in the pop up box however I am having problems targeting it.
I tried to give it an id but that does not work.
function fullScreenpopup(x){
var b = x.innerHTML;
var divpopup = document.createElement("div");
divpopup.innerHTML = b + '<a href = "javascript:void(0)"
onclick ="fullScreengetrid()">Close</a>';
b.id = "imagepopup"; // this line does not work
divpopup.setAttribute('class', 'white_content_philips');
divpopup.setAttribute('id', 'popupbox');
document.body.appendChild(divpopup);
var popupdiv = document.createElement("div");
popupdiv.setAttribute('class', 'black_overlay_philips');
popupdiv.setAttribute('id', 'fadepopup');
document.body.appendChild(popupdiv);
}
any ideas please?
This is what the code relates to
<div style="float:left;">
<a href = "javascript:void(0)" onclick ="fullScreenpopup(this)"><img
src="acb.jpg"
alt="abc" width="300" height="225"
class="alignnone size-medium wp-image-1807" /></a>
</div>
I assume id is getting assigned correctly in the DOM and you can verify this through the debugger. I think your biggest issue is assigning width and height to the image in HTML. This will override any changes you make in CSS. Try.
<img src="acb.jpg"
alt="abc"
class="alignnone size-medium wp-image-1807" />
Plugin portfoliojs was my choice for creating a carousel-style portfolio. However, I have discovered that there is no zoom functionality built into the plug in. Due to relative complexity of the jquery code, I am at a loss how to manually add zoom (more precisely, fancybox) functionality to the gallery. The "lightbox=true" initialization option merely dims the other images in the gallery, but does not zoom the image of choice.
Ideally, I would like to add fancybox functionality to my gallery, e.g. my html would look like this:
<div id="gallery">
<img src="someimage.jpg></img>
<img src="someimage2.jpg></img>
</div>
However, the gallery in portfoliojs only works when is child element of ( with no level in between):
<div id="gallery">
<img src="someimage.jpg></img>
<img src="someimage2.jpg></img>
</div>
I have tried to wrap the <img>elements into <a> but it did not work.
Is there a way I could combine the functionality of two plugins ( portfoliojs and fancybox) without significant code rewriting? What would the alternative be?
This is what I would do.
Having an html like this :
<div id="gallery">
<img src="images/01.jpg" alt=""/>
<img src="images/02.jpg" alt=""/>
</div>
where src attribute points to the image to be shown in fancybox, use this code :
var images = [];
$("#gallery").find("img").each(function(i){
images[i] = $(this).attr("src");
$(this).bind("click", function(){
$.fancybox(images,{
index: i
});
})
});
See JSFIDDLE
NOTE: You could use .on() (preferred) instead of .bind() :
$(this).on("click", function(){ ...
it requires jQuery 1.7+ though. See updated JSFIDDLE
There's a list of elements, let's say some images:
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
I select them and store the result in a variable:
var elements = $('img');
Now I want to bring the last image to the first position. It works fine like this:
elements.first().before(elements.last());
After that the object elements naturally still holds the values in the order they where before. I can update this by querying again after the shift:
elements = $('img');
But it seems inefficient to run another query when I already have all the elements together. Also, as it's not an array this won't work:
elements.unshift(elements.pop());
What's the best way to update the object list in such a case?
fake it!
[].unshift.call(elements, [].pop.call(elements))
Demo
Caveat: I doubt this is faster than re-executing the query.
There are two things going on here.
You have a set of elements in the DOM, and a variable holding a DOM fragment of references to those elements.
The jQuery first() and last() functions are moving the elements in the DOM, but they don't know anything about the variable.
From a code simplicity point of view, your suggested code is the most readable, and should be fine unless you are calling it a lot.
elements = $('img');
Otherwise, turn the variable into an array:
var elementsarray = [];
elements.each(function(i) { elementsarray[] = this; });
<div class="container">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
$('.container img:last-child').prependTo('.container'); //would work
$('img:last', elements).prependTo(elements);
// i think this will also work if you need to cache it