Ive made a basic "gallery" which uses the function below to show a larger picture when clicking on thumbnails. I want to make an animation to transition the thumbnail in to the bigger image. for example the thumbnail could slide to the place of the bigger image and spread to it or something along those lines.
function Kuvansuurennus(pic)
{
document.getElementById("peukalokuva").style.visibility="visible"
document.getElementById("peukalokuva").src=pic
}
Some style definitions I use
.thumb
{
height:150px;
width:200px;
}
#peukalokuva
{
float:right;
margin-right:4%;
width:70%;
visibility:hidden;
}
And the images I use and the target image for the bigger images
<img id="peukalokuva">
<div>
<img class="thumb" src="kuva1.jpg" onclick="Kuvansuurennus(this.src)"/>
<br>
<img class="thumb" src="kuva2.jpg" onclick="Kuvansuurennus(this.src)"/>
<br>
<img class="thumb" src="kuva3.jpg" onclick="Kuvansuurennus(this.src)"/>
<br>
<img class="thumb" src="kuva4.jpg" onclick="Kuvansuurennus(this.src)"/>
<br>
<img class="thumb" src="kuva5.jpg" onclick="Kuvansuurennus(this.src)"/>
<br>
<img class="thumb" src="kuva6.jpg" onclick="Kuvansuurennus(this.src)"/>
</div>
Thats the code, so how should I modify the funktion to get an animated transition from thumbnail to larger image?
You could do something with the format of...
$('img.thumb').click(function(){
var source = $(this).attr('src');
$('#peukalokuva').show().attr('src', source);
});
This would mean you wouldn't need click handlers in your html. You would want to reference a larger image though. Possibly in a different folder. source = 'large/' + $(this).attr('src')
Related
I have just started with Javascript/HTML and am wondering how I could create a page that has say, 2 images on and when you click on an image text relevant to that image appears?
My images are listed as below:
<img class="thumb" data-ord="1" onclick='changeMainImg(this);' src="full/01.jpg">
My changeMainImg function:
function changeMainImg1(that) {
document.getElementById("fullview").src=that.src;
current=that;}
Can I implement the text in the function so that each of the two different images has its own text?
Thank you
There are several ways to achieve this. If text is short, you can add it as a dataset attribute in the same img tag like this:
<img class="thumb" data-ord="1" data-text="my text" onclick='changeMainImg(this);' src="full/01.jpg">
function changeMainImg1(that) {
document.getElementById("fullview").innerHTML = that.dataset.text;
}
Other way is to define a variable with all texts and call it by index:
<img class="thumb" data-ord="0" onclick='changeMainImg(this);' src="full/01.jpg">
var texts = [
'text 1',
'text 2'
];
function changeMainImg1(that) {
document.getElementById("fullview").innerHTML = texts[that.dataset.ord];
}
I assume displaying the src attribute works for you. Below a possible solution. Prerequisite is to assign the same class name to each image involved.
/* Store image elements in an array */
const images = [... document.getElementsByClassName('thumb')];
/* Assign event listener to each image element */
images.map( (image) => image.addEventListener( "click", function()
{ alert(image.src) }
));
<img class="thumb" data-ord="1" src="full/01.jpg">
<img class="thumb" data-ord="2" src="full/02.jpg">
<img class="thumb" data-ord="2" src="full/03.jpg">
<img class="thumb" data-ord="2" src="full/04.jpg">
<img class="thumb" data-ord="2" src="full/05.jpg">
I'd like to display the alt text for an image as a paragraph with a class using vanilla JavaScript.
Example:
<img src="image.jpg" alt="These are planets">
Rendered As:
<img src="image.jpg" alt="These are planets">
<p class="photo-caption">These are planets</p>
Try the following. Note that it uses es6 functions
const images = Array.from( document.querySelectorAll('img') );
images.forEach(image => {
let alt = image.getAttribute('alt');
if( alt )
{
image.insertAdjacentHTML('afterEnd', `<p class="caption">${alt}</p>`);
}
});
<img src="https://placeimg.com/240/280/any" alt="These are planets">
<img src="https://placeimg.com/240/280/any" alt="These are something">
<img src="https://placeimg.com/240/280/any" alt="Something else">
<img src="https://placeimg.com/240/280/any" alt="Something">
In case it's useful to anyone here's what I ended up with and it worked perfectly. This is useful if you'd like to selectively add captions to images without adding additional HTML to your Markdown:
Jekyll/Github pages markdown:
{: .add-caption}
On build it will render:
<img class="add-caption" src="image.jpg" alt="These are planets">
Using #SuperDJ's JS
const images = Array.from( document.querySelectorAll('.add-caption') );
images.forEach(image => {
let alt = image.getAttribute('alt');
if( alt )
{image.insertAdjacentHTML('afterEnd', `<p class="photo-caption">${alt}</p>`);}
});
Final Output HTML:
<img class="add-caption" src="image.jpg" alt="These are planets">
<p class="photo-caption">These are planets</p>
Add CSS:
.photo-caption {
color: #999;
font-size: .5rem;
text-align:center;
}
Hope it's helpful to you. I searched the web for an hour and couldn't find a solution.
EDIT: I WANT MY SLIDER TO BE EASY TO YOU AND ONCE A LINK IS CLICKED THE IMAGE THAT CORRELATES WITH LINK SHOWS.
I'm looking to make a really simple "slider" that if you click a link, the img shows that correlates with it. I've been trying to find something for a bit now and things are either too flash or don't suit my needs. This came close: http://jsfiddle.net/bretmorris/ULNa2/7/
I would something a little simpler that can be applied easily to multiple images for different divs.
This is what my code looks like with just a plain img tag to it:
<div id="adobe_content" class="hdiv"><button class="x">X</button>
<img src="images/adobefront.png"><br>
<img src="images/adobeinside.png"><br>
<img src="images/adobeback.png"><br>
<h5>Adobe Brochure</h5>
<p>
I wanted to make something functional and out the box that Adobe might consider giving out. It's clean like their work and sparks interest in opening the brochure with the cut out in the center. The front flap is able to slide into a slot on the right side for a neat logo. They're now more interested in their cloud, but the information is inside is still relevant!
</p>
<b>Programs used: Adobe Illustrator, InDesign and Photoshop.</b>
</div>
The code doesn't work for me because, well I partially don't understand it, and I'm not sure how to make it suit my needs (especially if I got up to multiple images) like correlating with an image.
Perhaps understanding what is going on would maybe get you on the right track, so here is an explanation:
$('a.prev').click(function() {
prevSlide($(this).parents('.slideshow').find('.slides'));
});
//clicking image goes to next slide
$('a.next, .slideshow img').click(function() {
nextSlide($(this).parents('.slideshow').find('.slides'));
});
This part is relatively straightforward, when you click on the previous or next links, call the prevSlide or nextSlide function, passing the collection of slides as an argument.
//initialize show
iniShow();
function iniShow() {
//show first image
$('.slideshow').each(function() {
$(this).find('img:first').fadeIn(500);
})
}
Initialize the slideshow by finding each slideshow on the page and fading in the first image. $(this) refers to the <div class="slideshow"> parent, find all child image tags and take the first, fade that element in (and do it in 500 milliseconds).
function prevSlide($slides) {
$slides.find('img:last').prependTo($slides);
showSlide($slides);
}
function nextSlide($slides) {
$slides.find('img:first').appendTo($slides);
showSlide($slides);
}
The prevSlide and nextSlide functions both rearrange the order of images, this line in particular:
$slides.find('img:first').appendTo($slides);
Is moving the first image to the end of the images, so:
<img src="http://placekitten.com/300/500" width="300" height="500" />
<img src="http://placekitten.com/200/400" width="200" height="400" />
<img src="http://placekitten.com/400/400" width="500" height="400" />
becomes:
<img src="http://placekitten.com/200/400" width="200" height="400" />
<img src="http://placekitten.com/400/400" width="500" height="400" />
<img src="http://placekitten.com/300/500" width="300" height="500" />
$slides.find('img:last').prependTo($slides); does the inverse and moves the last image to the beginning.
function showSlide($slides) {
//hide (reset) all slides
$slides.find('img').hide();
//fade in next slide
$slides.find('img:first').fadeIn(500);
}
Finally, showSlide accepts the collection of images, hides all of them and then fades in the first image (since the collection is reordered each time, the first is a different image).
Now, if you want a link for each image that will display a corresponding image, you could do something as simple as:
<a class="image" data-src="http://placekitten.com/300/500">Kitten 1</a>
<a class="image" data-src="http://placekitten.com/200/400">Kitten 2</a>
<a class="image" data-src="http://placekitten.com/400/500">Kitten 3</a>
<div id="image-container">
<img src="http://placekitten.com/300/500" />
</div>
and something like the following:
$('.image').on('click', function() {
var imageSrc = $(this).data('src');
$('#image-container img').prop('src', imageSrc);
});
Which will update the child image tag of <div id="image-container"> with the data-src attribute value in the clicked link.
http://jsfiddle.net/9sxt6n0t/
Hope this helps.
just a quick function to slide
function slideIt(images , prev , next){
$('.slideshow img:nth-child(1)').show();
var imagesLength = $(images).length;
var i = 1;
$(prev).click(function() {
$(images).hide();
if(i !== 1){
$(images + ':nth-child('+ (i - 1) +')').show();
i--;
}else{
$(images +':nth-child('+imagesLength +')').show();
i = imagesLength;
}
});
//clicking image goes to next slide
$(''+next+','+images+'').on('click',function() {
$(images).hide();
if(i !== imagesLength){
$(images + ':nth-child('+ (i + 1) +')').show();
i++;
}else{
$(images + ':nth-child(1)').show();
i = 1;
}
});
}
and use like that slideIt(Images , prevArrow , nextArrow)
slideIt('.slideshow img','a.prev' , 'a.next');
DEMO HERE
I tried everything and couldn't link my Image IDs to a preloaded Generic.js file in the Head section. Here's my HTML below:
<div id="bgimgwrapper">
<noscript>
<div>
<img id='bgNoScript' src='index_files/background1.jpg'
alt='' title='' width='100%' height='100%' />
</div>
</noscript>
<img class="active" id="bg0" src="index_files/background1.jpg"
style="width: 100%; display: none;">
<img id="bg1" src="index_files/background2.jpg"
style="width: 100%; display: block;">
</div>
bg0 and bg1 should be assigned to a function inside the preloaded generic.js, here's the function:
function bgStart() {
setCurrentCycle();
$bg = $('<img style="width:100%">'), bg = $bg[0];
$bg.hide().load(bgLoad);
$bg.addClass("active");
bg.id = "bg" + currentCycle;
bg.src = slideArray[currentCycle];
$bg.appendTo("#bgimgwrapper");
theWindow.resize(resizeBg)
}
bgStart() basically is a background image slider. In firebug though, I can't even see the evaluation "ev" sign next to each ID divs. Appreciate your comments.
don't understand why you are using 2 references for your new bg element... how about:
$bg = $('<img style="width:100%">');
$bg.hide().load(bgLoad)
.addClass("active")
.attr('id', 'bg' + currentCycle)
.attr('src', slideArray[currentCycle])
.appendTo("#bgimgwrapper");
theWindow.resize(resizeBg);
Im building a website where there is a photo of a girl and to the side are a group of glasses that you can try on over her face. Right now I have it so that when you rollover one of the glasses in the group they are highlighted, but I also want a pair to show up over the photo in separate DIV when you click it.
This is what i have for just the rollover:
function rollOver()
{
document.getElementById("helm").src ="images/helmOver.jpg";
}
function rollOut()
{
document.getElementById("helm").src ="images/helmStatic.jpg";
}
</script>
<div id="framestyle">
<img class="frame" src="images/helmStatic.jpg" id="helm" border="0" width="71" height="40" onmouseover="rollOver()" onmouseout="rollOut()"/>
</div>
This is the div and image I want to show up over the photo when a pair are clicked:
<div id="glasses">
<img src="images/faceGlasses.png">
</div>
***How do i get the image in the second div to only show up when the image/rollover is clicked in the first div?
I would add
function clickedGlasses(glassesImage) {
document.getElementById("glasses_overlay").src = glassesImage;
document.getElementById("glasses_overlay").style.display = "block";
}
To your script tag at the top, and then
<img id="glasses_overlay" src="blank.png" style="display:none;">
Into your "glasses" div alongside the "faceGlasses" image (you'll need to position this over the top of the other div, either absolutely, or relatively)
And finally, change your "helm" img to
<img class="frame" src="images/helmStatic.jpg" id="helm" border="0" width="71" height="40" onmouseover="rollOver()" onmouseout="rollOut()" onclick="clickedGlasses('images/helmOverlay.png')" />