javascript swap thumbnail with larger image - javascript

Im pretty new to web programming and im working on a site now. In one part of this site, I have collections of 3 pictures. 1 larger one and two smaller thumbnails below it. The goal is to create a way in which i can click on one of the thumbnails and they swap spots with the one large picture. any idea how I would go about doing this? Heres a snippet of code. Thanks!
<div class = 'picture-container'>
<div class = 'large-picture' id = 'lp1'>
<figure style = 'float:left;width:45%;'>
<img src = 'close_table_dupontstudios.png' width = '100%' height = '100%' class = 'no-mobile'>
<figcaption class = 'red-cap'>Our Set-Up</figcaption>
</figure>
<div class = 'picture-content'>
<div class = 'picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
<div class = 'picture-text'>We built a boutique full service production studio that allows for one, two and three person filmed interviews and conversations. We have studio lights, a three camera set-up and remote monitoring. Additionally, our Infinity Wall creates a clean and professional look that allows the film to be about the message.</div>
<!--<div class = 'small-picture'>
<img src = 'hair_and_makeup_dupontstudios.png' width = '175' height = '100'>
</div>
<div class = 'small-picture'>
<img src = 'infinity_wall_dupontstudios.png' width = '175' height = '100'>
</div>-->
</div>
<div class = 'thumbnail-container'>
<figure class = 'thumbnail'>
<img src = 'infinity_wall_dupontstudios.png' width = '100%' height = '100%'>
</figure>
<figure class = 'thumbnail'>
<img src = 'infinity_wall_dupontstudios.png' width = '100%' height = '100%'>
</figure>
</div>
</div>
</div>

There are many ways to solve this problem. The easiest way is to dump all your images (large and small) and only show one at a time.
So in the source code all your large images except the first one will have a class of hidden, which makes them display: none. And then it's just a matter of showing the right large image when the thumbnail is clicked.
To show the right large image you need to associate the thumbnails with the large image by an identifier. Below is an example of setting the href of a thumbnail link to the large image id.
<a href="#lp1">
<figure class="thumbnail">...</figure>
</a>
Now you add the javascript (jQuery).
// preselect all large images
var largeImages = $('figure.large');
// add handler for thumbnail clicks
$('.thumbnail-container').on('click', 'a', function (e) {
e.preventDefault();
var thumbnailLink = $(this),
selectedLarge = $(thumbnailLink.attr('href'));
// hide all the large images
largeImages.addClass('hidden');
// show the large image that corresponds to the clicked thumbnail
selectedLarge .removeClass('hidden');
});
So, the easies way is hide/show, but this means is not the most efficient. It makes the client load all the images even if they are hidden.
A more efficient approach is to add data- attributes in the thumbnails and inside the thumbnail click handler update the large content area with the data from the clicked thumbnail.To "replace" the image you just need to replace src attribute.

Related

Overlay overrules images - Can't automate src

I have an image that uses jquery for when an image is clicked, this will return the image src for that image. I modified my HTML/CSS to give this image an overlay.
However, I have now added an overlay that comes from left to right when the image is hovered. This added complications, as now when the jquery tries to find the image src, it can't because the overlay is covering it.
This has meant I have to manually write the code for each image src, but this does not work because obviously when you click each image, each one will have a different img src.
To provide example:
$(".dogs img").click(function(){
var src = $(this).attr("src");
});
Now that I have an overlay, unless I'm really fast and beat the overlay covering my screen, I can't click the image, but only the overlay covering it.
<div class = "cover-overlay">
<img src = "dog-1.png">
</div>
<div class = "cover-overlay">
<img src = "dog-2.png">
</div>
<div class = "cover-overlay">
<img src = "dog-3.png">
</div>
So now I have to do,
$(".dogs .cover-overlay").click(function(){
var src = $(".dogs img").attr("src");
}
however this will obviously always return the source of the first image in dog class, because of how the click function now works with overlay. Any suggestions?
You can still use this to reference the clicked .cover-overlay element, but now you need to also use find() to get the child img from it:
$(".dogs .cover-overlay").click(function(){
var src = $(this).find('img').prop("src");
});

bootstrap dynamic image generation sets width=

I am converting a site under development to bootstrap. On one of my pages I dynamically create an image based on user input.
I start with a page like this:
And after :
The user clicks on one of the magazine covers and a new image is generated in the upper left corner. Other parts of the image are user choices made on other pages.
My problem is that the javascript generating the code insert width= and height= code in the HTML. Since this defeats bootstraps responsive images, I want to get rid of that but I can't figure out how. Everything else is working fine.
Here is the process:
I start with the HTML:
<div id='FramePreviewDiv'>
<img class='img-responsive' alt='' id='fpS' style='padding:4px' src='' /> </a>
</div>
There is no image on page entry. A default image is generated.
When the customer clicks on one of the magazine covers a request is issued.
getImage('fpS', buildFrameUrl ( 200 ), true);
The function buildFrameUrl returns something like this:
http://www.example.com/BuildFrame.php?mNo=693&tm=C9885&mm=&bm=C9887&noMats=2&size=200&art=siv1n1-0854.jpg&ft=1&matWidth=2.0&maxWidth=200&maxHeight=400&artWidth=8.25&artHeight=11.5&isCropped=0&xStart=0&yStart=0&croppedPxWidth=&croppedPxHeight=&caw=&cah=
Here is the code for getImage
function getImage(pExistingImageID, pImageURL, fShowLoading)
{
var link;
if (fShowLoading)
{
document.getElementById(pExistingImageID).src="/img/loader.gif"; // animated gif of your choice
document.getElementById(pExistingImageID).width=32;
document.getElementById(pExistingImageID).height=32;
}
var img = document.createElement('img');
img.onload = function (evt) {
document.getElementById(pExistingImageID).src=this.src;
document.getElementById(pExistingImageID).width=this.width; // this is the culprit
document.getElementById(pExistingImageID).height=this.height; // this is the culprit
};
img.src = pImageURL;
return false;
}
The HTML generated by this looks like this
<div id="FramePreviewDiv">
<img id="fpS" class="img-responsive" width="200" height="244"
src="http://www.tpfnew.com/BuildFrame.php?mNo=693&tm=C9885&mm=&bm=C9887&noMats=2&size=200&art=siv1n1-0854.jpg&ft=1&matWidth=2.0&maxWidth=200&maxHeight=400&artWidth=8.25&artHeight=11.5&isCropped=0&xStart=0&yStart=0&croppedPxWidth=&croppedPxHeight=&caw=&cah=" style="padding:4px" alt="">
</div>
The width= comes from the value set here:
document.getElementById(pExistingImageID).width=this.width;
Same same for the height.
I tried eliminating the line but that gives me a 32x32 image from the fShowLoading code. If I delete the width and height= from the fShowLoading block, I get the right size image but still with the width= and height= in the resultant html.
Any thoughts on how I can eliminate the generation of the width= and height= html so bootstrap will be able to resize the images responsively?
So what seems to be happening is because the image itself has a height and width assigned to the image its making the image become those sizes. So instead of trying to change the JS to remove the height and width just leave the JS alone and overwrite the properties with CSS like this:
#FramePreviewDiv .img-responsive {
width: 100%;
height: auto;
}
Here is a js.fiddle with an example. Hope that helps

slideshow using html not working

I have gone through the answer posted earlier on this website but my slideshow does not work and shows the first image always.
Below is my code
<div id= slideshow>
<img class ='imagem_artigo' src="/images1/coveover.jpg" name="Myslide" width=750; height=300 align="middle">
<script type="text/javascript">
var step = 1;
var img1 = new Image();
img.src = "/images1/tecover.jpg";
var img2 = new Image();
img2.src = "/images1/te.jpg";
var img3 = new Image();
img3.src = "/images1/te1.jpg";
var img4 = new Image();
img4.src = "/images1/im7.jpg";
function slideshow(){
document.images.Myslide.src = eval("img" + step+".src");
if(step<=4)
step++;
else
step = 1;
setTimeout(function(){slideshow()},1000);
}
slideshow();
</script >
</div>
When building sliders it's better to write the majority of what you want to show in the DOM so it'll load and search engines can find it etc.
Here's what I would do
<div id="imageSlider">
<div class="imageSliderContainer clearfix">
<div class="article">
<img src="/images1/coverover.jpg" width="" height="" alt="write stuff here etc" title="">
</div>
<div class="article">
<img src="/images1/tecover.jpg" width="" height="" alt="" title="">
</div>
<div class="article">
<img src="/images1/te.jpg" width="" height="">
</div>
<div class="article">
<img src="/images1/te1.jpg" width="" height="">
</div>
<div class="article">
<img src="/images1/im7.jpg" width="" height="">
</div>
</div>
</div>
using alt and title will mean your html will be wc3 compliant ;) also the image can be found using an internet search :) or whatever
Now you wanna build a slideshow huh? I'll show you some cool CSS to get you going first then I'll come back to the javascript :p
first off, we want to make sure people who haven't got javascript enabled are able to view your images don't we? So lets make a nice scroll window looking thingy for those special paranoid people with no javascript :p
#imageSlider{overflow:auto;}
Now anything that's over 100% width of #imageSlider will be scrollable.
I've used classes called articles. The reason I've done this will become much clearer later :) but for now this is simply why.
There are 5 articles and you want each to be 100% of the parent so that the others aren't showing when you're on that image right? So 5*100=500
.imageSliderContainer{width:500%;}
100/5=20
.imageSliderContainer .article{width:20%;float:left;}
.clearfix:after{clear:both;display:block;visibility:hidden;content:'';}
Now each article/image will be 100% width of the parent so they won't be visible when one is selected :p
and the clearfix and float will make the articles inline with each other :) without causing conflicts with other elements
Next we want to make sure our images look cool inside the article. and they're properly positioned and sized so they're not outside of the container etc.
.imageSliderContainer .article img{max-width:100%;height:auto;display:inline-block;}
.imageSliderContainer .article{width:20%;text-align:center;background:#000000;}
now things should be starting to look rather nice and smooth right? IF you're still following :p
Next comes the javascript. I'm more fluent in jQuery but I'll give examples of both just incase :)
First off we want to turn off the scrolling
$('#imageSlider').css({'overflow':'hidden'});/*jquery*/
document.getElementById('imageSlider').style.overflow="hidden";/*javascript*/
Next we want to make the images 'change' when really what I'm going to do is scroll the element along so we can see the next one ;p
Some people like to use a negative margin left but some designers are like "AGHHHH NEGATIVE VALUES" for some reason so I'll just use scrollLeft instead :p
this is where it's ganna get a little complicated. First you want to get the current location of the container's scrollLeft then adjust it.
/*jQuery*/
function nextSlide(){
var sliderScroll=$('#imageSlider').scrollLeft();
var artWid=$('.article').width();
var artQuant=$('.article').length;
var next=0-(sliderScroll==((artQuant-1)*artWid))?0(sliderScroll+artWid);
$('#imageSlider').animate({scrollLeft:next},500);
}
/*javascript*/
function nextSlideA() {
var slider=document.getElementById('imageSlider');
var art=document.getElementsByClassName('article');
var next=0-(slider.scrollLeft==((art.length-1)*art[0].offsetWidth()))?0:(art[0].offsetWidth()+slider.scrollLeft);
document.getElementById('position').innerHTML=next;
slider.scrollLeft = next;
}
the variable next will equal 0 if you're on the last image and will go to the next image if you're in the middle of the slideshow :)
Javascript won't look as fancy as jQuery but it'll get the job done. I'm sorry if I've made any mistakes I'm currently on the phone as I'm writing this, let me know if something doesn't work and I'll fix it :)
Next just simply call the function using your setInterval();
var slider=setInterval(function(){nextSlide();},1000);
And job done :) Hope this was helpful! I'll make a quick jsfiddle for you so you can see how it all works :)
http://jsfiddle.net/s6crzzfr/

javascript picture change not working correctly

Im in the middle of creating a site and have run into a bit of an issue. Basically what im working with is a collection of 3 pictures, two small, one large. What I'd like is that when you click one of the small pictures, it takes the spot of the larger picture. I have a javascript function that does this successfully but with one minor issue. Theres 3 of these collections of 3 pictures and thus when you click a small image to have it swap with the bigger one, the small image takes the spot of all of all 3 of the larger images instead of just the one for its section. Any suggestions? Thanks
the javascript function
$(document).ready(function(){
$('img').click(function(){
var url = $(this).attr('src');
var bigUrl = $(this).parents('.picture-container').find('.large-picture > img').attr('src');
$('.large-picture > img').attr('src', url);
$(this).attr('src', bigUrl);
});
});
what one of the sections looks like
<div class = 'main-content'>
<div class = 'picture-container'>
<div class = 'large-picture' style = 'width:50%;height:100%;float:left;'>
<img src = 'close_table_dupontstudios.png' width = '100%' height = '100%'>
</div>
<div class = 'picture-content' style = 'float:right;width:45%;height:100%;'>
<div class='picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
<div class='picture-text'>We built a boutique full service production studio that allows for one, two and three person filmed interviews and conversations. We have studio lights, a three camera set-up and remote monitoring. Additionally, our Infinity Wall creates a clean and professional look that allows the film to be about the message.</div>
<div class = 'small-picture-wrapper'>
<div class = 'small-picture' style = 'float:left;height:100%;'>
<img src = 'hair_and_makeup_dupontstudios.png' width = '100%' height = '100%'>
</div>
<div class = 'small-picture' style = 'float:right;height:100%;'>
<img src = 'infinity_wall_dupontstudios.png' width = '100%' height = '100%'>
</div>
</div>
</div>
</div>
You're using a class selector for .large-picture when you're selecting it to apply the new image src. Presumably, all three sections have an element with this class, meaning all three are selected by your .large-picture selector. You need a more explicit selector to get ONLY the appropriate element.
You could use an id, or you could use parents() and find() in conjunction like you did previously:
$(this).parents('.picture-container').find('.large-picture > img').attr('src', url);

Possible to aquire a CSS defined size for an image via Jscript and change URL values before image loads?

So what I have is the following HTML structure
<div class="large">
<a href="http://www.google.com">
<img src="/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1" width="800" height="600" border="0" /></a>
</div>
Now that mythumb.php is a thumbnailer script that will on the fly create a thumbnail with predefined size limits (in this case 800x600).
However in my CSS file i've set
.large img
{
width:400px;
height:300px;
}
This is done so I achieve a retina effect on iphones/ipad, etc..
However, I was thinking this is better to be accomplished dynamically, and I want to be able to pull the CSS defined width and height and replace those values in the URL
In this case, would it be possible for javascript to change
/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1
to
/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg*&h=300&w=400*&zc=1&s=1
This change should occur before the image loads so we dont waste the users bandwidth downloading the same image twice.
I would also like to only apply this to images being called from the mythumb.php, not my other static images on the page
Does anyone think something like this is possible?
in html layout your img tags, but omit a src attribute
<img id="test" class="variableRes" />
<img id="test1" class="variableRes"/>
in js set up an array of your image paths:
myImages = {
test: "/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg",
test1: "/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test1.jpg"
}
Your css determines the img sizes, so you can query the img style, build the url and assign the src to the img tags
$('.variableRes').each(function(){
var $el = $(this);
var id = $el.attr("id");
var height = $el.css("height").substr(0,-2);//strip "px"
var width = $el.css("width").substr(0,-2);
$el.attr("src", myImages[id] + "&h="+ height +"&w="+ width+"&zc=1&s=1");
})
You can't prevent the loading of the images if they have a src. You can change it to another attr like 'data-src'
<img data-src="/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1" width="800" height="600" border="0" />
Then you can iterate them like this: (not recommended if you have a lot of imgs though)
var imgs = document.getElementsByTagName('img');​​
for (var i = 0; i < imgs.length; i++) {
if (notRetina) {
imgs[i].src = imgs[i].getAttribute('data-src')
.replace('h=600', 'h=300')
.replace('w=800', 'h=400');
}
}
You probably can do better than a replace to put the values you want (as in not puting them in the data-src attr).
If you set the src of the image in the HTML source on the server it will in most cases result in the browser fetching the image twice. You can do two things:
Set the src using javascript and initially let it point to a placeholder.
Set the style of the a tag inline.
If the size of the image is different every time I would go for the second option because it is easier and it is faster
SO:
<div style="width: 800px; height: 600px">
<a href="http://www.google.com">
<img src="/wp-content/themes/firstone/mythumb.php src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1" width="800" height="600" border="0" /></a>
</div>
The 800 and 600 values would be set using php.
If however the size is always the same in the "large" case you could use the javascript approach you mentioned. It is slightly slower because the CSS that has the width and height definition is fetched asynchronously. You will have to wait for the document.onload event instead of the the domready event to make sure you have the CSS width and height definition. You can then use javascript to fetch the width and height of the div and construct the image src. Because the onload can take a long time (especially is you have external potentially slow content such as social media buttons) the image will not be visible until everything is pulled from the server.
I would create a php large server variable and use that everywhere. It's most definitely the fastest and you still have the size definition on one place.

Categories