I have created a show/hide javascript function which seems to work perfectly - When you click on the link it reveals the gif version of the logo.
The issue i'm having is when you first go onto the landing page click here you can see both images, it's only when you click on the still image the function works the way is should - only displaying one image at a time. Does anyone know how i can resolve this problem?
You'll have to give the image a display:none style as well to start with:
<img id="center-img-gif" alt="main-img" src="css/images/logo.gif" style="display:none;">
use CSS property Display:none; for one of the images.
You can set display:none of one image at design time
OR
You can set display:none of one image on body onload
Related
I have a site that show many images hosted in a server. In the page, the images are situated in of max 100 images. In a single moment, only one div is displayed (throw the css style "display") and the others have the display:none.
I need a way that allow me to load only the images of the div displayed because when I open the site, it loads all the images.
when You are using display:none - the images are still being downloaded. But if You'll use display:none on background-image they won't. Another approach is to make a button "Load more..." and asynchronously request the rest of the images
your can hide the images which you dont want to display on page load, try following code in document.ready function
$(document).ready(function(){
$("#img1").hide();
$("#img2").hide();
$("#img3").hide();
.
.
.
$("#img_n").hide();
});
One way you could do it is by making a large image sprite, which you will upload and let the browser cache it.
A good explanation about CSS sprites can be found here: http://www.w3schools.com/css/css_image_sprites.asp
Just leave the img tag's src="" blank on all but the first image and modify it with javascript.
You can use an onload event to trigger setting the next src property.
I've been messing around with a ton of different attempts none of which have proved even remotely successful. If someone is willing to, would you either walk me through or point me in the right direction.
I'm using http://sorgalla.com/projects/jcarousel/ Jcarousel as the image carousel on the top of the page with 3 images up at a time.
I'm looking for something like this following link http://tamarackcellars.com/ but where the content at the bottom of the page changes instead of the whole page loading to a new page when you click on one of the wines.
Any help would be greatly appreciated.
ok I am assuming you can get the carousel plugin to work, if not let me know.
If I understand you right, you want the content of the page to change but not to redirect. If this is static content then what you want is relatively simple and can be solved many ways.
First set up your carousel and give each image or content the same class like class="carouselObj". Then create a container on the same page that will hold different information with respect to each element of the carousel.
<div id="container">
<div class="info">1st image info</div>
<div class="info">2nd image info</div>
<div class="info">3rd image info</div>
<div class="info">4th image info</div>
</div>
Now to add some jquery to make it functional.The idea here is that when one of the images changes via click or from a timed event, the corrosponing information in the container will also change. Here is some code to give you the idea.
$('.carouselObj').click(function(){
var index = $('.carouselObj').index(this); // gets the index of carousell image clicked
$('.info').eq(index).show().siblings('.info').hide(); // shows the corrosponding element and hides the others.
});
Now in the css file you need to make sure you originally set the first info class
I am building a site with infinite scroll, and when I append images to the bottom of a DIV, they do not show up.
I am basically appending a tag like <img src='test.png' /> why would these images not show up? Do I need to preload them? If so, how would I go about doing so?
EDIT: Here is the page where it is happening: http://campus-meme.com/ - try to scroll to the bottom; images get added to the DOM but never show up.
Just took a closer look at your site.
The problem is, that the parent div of the image has a css style 'display:none'. If i delete this in the debugger, i can see the picture.
It get's this from the mosaic-backdrop class.
I just opened the site with chrome. I get several errors in the debugger console. Please check them.
For example you seem to have forgotten the $ in line 67 of your site.
The website I'm making has a large image fading in from black when the website loads. It's a good quality image and the effect turns out nice.
The problem is that when a person visits the website a first time, the fade doesn't occur and the image just appears. I figure that the opacity is changed right away, but the image itself hasn't been downloaded. Once it's cached, revisiting the site shows the effect.
What are some ways to ensure that the image is fully downloaded before the fade in begins (the fade is simple jQuery: $('#bg').fadeIn(1000);)?
EDIT - Thank you everyone. It's been solved. I left something out that I didn't realize was important. It wasn't an img tag, but a div with an image background. When I changed it to an img, the $(document).ready() function loaded the image before the fade. Thank you!
$(function() { $('#bg').fadeIn(1000)) })
Just take a look at .load() event handler in jQuery. It is called when everything in the associated element has been loaded - if you attach it to img tag with your image, the callback will be called when the image was fully loaded.
You should put the Script of loading the IMG at the top of the HTML ( HEAD is in option)
BUT
its a bad practice.
you can maeke a basic page and at the button scripts - you can download the img - and by the load event - you can FADE it IN.
i think it's easier to use the ready function
http://api.jquery.com/ready/
I am currently using the code below to load images but I want to show some kind of loading gif before the image loads completely.
$('#addimage').attr('src', src[i]);
$('#addimage').show();
Since I am using this in a animated mediabox the image loading in blocks does not look good so by the time the image is loading I want to replace it by showing a loading gif. Thanks
Use the load() event:
$("#addimage").load(function() {
$(this).show();
});
Edit: to show one image until another loads is a little more convoluted but entirely possible. See Image Loading.
You can use the callback event for once the image has loaded. Something like:
$('#addimage').load(function() { $(this).show() });
$('#addimage').attr('src', src[i]);
So you setup the load handler first, then apply your src attribute. This is assuming the image is hidden by default (via CSS, etc).
You can bind the onload event to the image.
Why not just set the src attribute to point to a loading image (EG, animated gif) and just show it the whole time?