Im trying to do infinite horizontal image gallery but cannot figure out few problems.I got a div that has 100% width and inside second div that has very big width so the images can be next to each other.Im in testing phase so function is running immediately after page loads so the gallery is moved left by margin of width first image and then it has to be appended as last child and its looks like thats working but right after first append its happening on and on with another images.How can i avoid it?And my second question is when i want to do the moving on hover for example on some arrow as long as im over that how can i cycle this function correctly?Thanks very much.
Here is the fiddle.
HTML
<div id="slider">
<div id="slide-container">
<div class="slide" id="slide"><img src="clique.jpg"></div>
<div class="slide"><img src="rollyx.jpg"></div>
<div class="slide"><img src="grafrollyx.jpg"></div>
<div class="slide"><img src="grafagent.jpg"></div>
<div class="slide"><img src="grafrollyx.jpg"></div>
</div>
</div>
JavaScript
function slider(){
var what = $('#slide').width();
$('.slide').first().animate({marginLeft: -(what)}, 0, setTimeout(function() {
$('.slide')
.first()
.appendTo($('.slide').parent())
.css({ marginLeft: 0 });
}, 1000))
}
i guss this is a better way of doing that
Here is a FIDDLE of the gallery.
Put all your images in a hidden div
Clone them and put them in the visible div
Animate the image by changing the left margin
You can adjust the time between images by the set interval function
You can adjust the slidein time by the animate time.
JS
var pictxtnumber = 1;
loadpictxt(pictxtnumber);
var fadeintime = 500;
animatediv();
function animatediv()
{
var number = 0;
var interval = setInterval(function() {
pictxtnumber = pictxtnumber + 1;
if(pictxtnumber > 6)
{
pictxtnumber = 1;
}
loadpictxt(pictxtnumber);
}, 1000);
}
function loadpictxt(num)
{
$('.picturediv').html('');
$(".hiddenimage img:nth-child(" + num + ") ").clone().appendTo('.picturediv');
$('.picturediv img').css('margin-left', '100px');
$('.picturediv img').animate({marginLeft: "0"}, 100);
}
Related
I have created this function but there are two things that are not working and, after a while trying to find why, I can't find the reason.
First, it should take the height from .bar-info, but is not. It gets -10, instead of 100px
Second, when the page loads (and on resize), it should run this function and get the height, but it doesn't. It works on resize, but not on ready
onResize = function() {
if($(window).width() < 1000) {
//Set height based in number of bars
$('.vert .bars').each(function(){
var length = $(this).find(".bar-info").length;
var info = $(this).find(".bar-info").height(); // 1. Not taking the correct height
var height = (info * length) + 1270 + "px";
$(this).parent().css({"height":height}); // 2. Wrong height just on load
});
} else {
$('.vert .bars').each(function(){
$(this).parent().css({"height":"1200px"});
});
}
}
$(document).ready(onResize); // Why it doesn't work?
$(window).resize(onResize); // This works
HTML:
<div class="container vertical flat vert">
<div class="bars">
<div class="bar-general">
<div class="bar-info">Content</div>
</div>
</div>
</div>
I'm having a issue with the website I'm creating. The truck image at the top is changing on scroll down, but while scrolling and changing the images there appears black space.
1) Images are 1400x600 JPG's, around 70kb each. I didn't lower the resolution because if someone accesses it from a 1920x1080 screen, the truck will be blurry and distorted.
2) The website is still not done, so it's on a free hosting now (000webhost.com), may this cause the images to load slower and the black space to appear?
Here is the website: http://denea.comeze.com/
Here's the script that changes the images, just in case:
var numberofscroll = 0;
var lastScrollTop = 0;
$(document).ready(function () {
var numberofscroll = 1;
var lastScrollTop = 0;
var totalImages = 4;
var dontHandle = false;
$("#home").scroll(function () {
if (dontHandle) return; // Debounce this function.
dontHandle = true;
var scrollTop = $(this).scrollTop();
(scrollTop > lastScrollTop) ? numberofscroll++ : numberofscroll--;
if (numberofscroll > totalImages) numberofscroll = totalImages;
else if (numberofscroll < 1) numberofscroll = 1;
change_background(numberofscroll);
lastScrollTop = scrollTop;
window.setTimeout(function() {
dontHandle = false;
}, 150); // Debounce!--let this handler run once every 400 milliseconds.
});
function change_background(num) {
$("#home").css("backgroundImage", "url('images/movie_" + num + ".jpg')");
};
});
Your Problem has to do with loading time.
Instead of loading the image, when the scroll begins, you can have the images you need already loaded in your page, that way you do not have any loading times, when swapping.
In HTML you have something like this:
<div class="headimg_container>
<img id="image_1" class="headimg" style="display: none" src=".......">
<img id="image_2" class="headimg" style="display: none" src=".......">
<img id="image_3" class="headimg" style="display:block" src"......">
</div>
I used headimg_container as a container element. The class should have a definitve height, so when hiding and showing your images, the container does not collapse.
And in JS you can do something like this:
function change_background(num) {
$(".headimg").hide();
$("#image_" + num).show();
};
The result would be smooth, since you can just swap the visibility of the image-tags, without any delay.
Another solution could be to use sprites, but with a few heavy images, you might want to stick with loading them separately as I suggested above.
Hope that helps!
Once I added bootsrap, my page re-sizing started shrinking my images down to 100px.
I have 3 divs title maintontent*. Each contains a div called rightcolumn (this needs to be the same for each div).
<div id="maincontent0">
<div id="rightcolumn">
<img/>
</div>
</div>
When the page loads I use jquery to set the with of this div. I do this again every time the window is re-sized:
$(document).ready(function() {
var rightColumnWidth = $('#rightcolumn').width() + "px";
$(".imageright").css({
'max-width': rightColumnWidth
});
var rightColumnHeight = $('#rightcolumn').height();
$(".imageright").css({
'max-height': rightColumnHeight
});
});
$(window).resize(function() {
var rightColumnWidth = $('#rightcolumn').width() + "px";
$(".imageright").css({
'max-width': rightColumnWidth
});
var rightColumnHeight = $('#rightcolumn').height();
$(".imageright").css({
'max-height': rightColumnHeight
});
});
I am using jquery to fade these 3 sections in and out when a button is pushed:
function page0() {
$("#maincontent0").fadeIn();
$("#maincontent1").fadeOut();
$("#maincontent2").fadeOut();
}
All of the resizing works fine until I fade the images in and out. Doing that and THEN resizing, my images SHRINKS all of my images in "rightcolumn" to exactly 100px (no matter the size of "rightcolumn".
My page can be found http://envisionhomedesign.com/derek/test15/index.html
Update: http://jsfiddle.net/cdL80nds/
Im trying to create a simple fade in fade out image slideshow in javascript. Ive managed to create one that shows one image, fades out and then fades another image in but this is not what im going for. What i want is so that when the first image fades out, there is already another image behind it and when the other image also fades out, theres another image behind that one too. Im trying to avoid having the part of the webpage that holds the slideshow from being empty at any time during the slideshow. Can anyone help me out by editing my code or showing me how I can achieve this?
var count = 1;
setInterval(function(){
if (count <= 3){
$("#slideshow").fadeOut(2000);
setTimeout(function(){$("#slideshow").attr("src","breakup/"+ count +".jpg")},2000);
$("#slideshow").fadeIn(2000);
count++;
if (count>3){
count = 1
}
}//end if
}/*end function*/,5000);
It's probably easiest to pre-load all of your images
css:
<style>
.slider{
position: relative;
}
img {
position: absolute;
top:0;
left:0;
}
</style>
Javascript:
<script>
var count = 1
setInterval(function(){
var old= $('#img-' + count);
old.fadeOut(2000);
count++;
if (count>3){
count = 1
}
var next= $('#img-' + count);
next.fadeIn(2000);
}, 5000);
</script>
html:
<div class="slider">
<img id="img-1" src="breakup/1.jpg">
<img id="img-2" src="breakup/2.jpg">
<img id="img-3" src="breakup/3.jpg">
</div>
Try this http://jsfiddle.net/wfvD6/.
Basically it clones the old image and put it over the new image, then fadeout old and fadein new at the same time.
//clone the old image
var ghost = slider.clone();
//remove id
ghost.removeAttr('id');
//make the ghost image just over the old image
var pos = slider.position();
ghost.css({
position: 'absolute',
top: pos.top,
left: pos.left
});
ghost.insertBefore(slider);
//$("#slideshow").attr("src","breakup/"+ count+".jpg");
//change image
setImage(count);
//fadeout ghost
ghost.fadeOut(2000, function () {
ghost.remove();
ghost = null;
});
//fadein slider
slider.fadeIn(2000);
I have created this fiddle http://jsfiddle.net/xmLk4/ You should set the images for slide 1 and 2 after the fadeout in order to allow loading of the image before it fades in.
function fade(){
$("#slide2").fadeOut(2000, function() {
// set new image slide 2
}).delay(2000).fadeIn(2000, function() {
// set new image slide 1
}).delay(2000);
}
setInterval(fade, 8000);
fade();
I want to know what's the best technique to slide an element just like in these examples:
http://demos.flesler.com/jquery/localScroll/#section1c
But with Pure Javascript so NOT jQuery or any library.
Example structure
<div id="holder">
<div id="bridge" onclick="slide('content')">Click to slide</div>
<div id="content" style="display:block;">The content</div>
</div>
So if I click on id=bridge the id=content will slide up and sets it's display to none and If I click on it again then sets it's display to block and slides down;
The sliding animation itself, like all animation in javascript, is done using timer functions: setTimeout or setInterval. For simple effects like this I always prefer setTimeout since it's easier to end the animation sequence compared to setInterval. How it works is to change CSS attribute values using setTimeout:
// move the content div down 200 pixels:
var content = document.getElementById('content');
function moveDown () {
var top = parseInt(content.style.marginTop); // get the top margin
// we'll be using this to
// push the div down
if (!top) {
top = 0; // if the margin is undefined, default it to zero
}
top += 20; // add 20 pixels to the current margin
content.style.marginTop = top + 'px'; // push div down
if (top < 200) {
// If it's not yet 200 pixels then call this function
// again in another 100 milliseconds (100 ms gives us
// roughly 10 fps which should be good enough):
setTimeout(moveDown,100);
}
}
That's essentially the basics of animation in javascript. The idea is very simple. You can use any CSS style attribute for animation: top and left for absolutely or relatively positioned elements, margins like my example, width, height, transparency etc.
Now, as for what to use in your specific case depends on exactly what your intentions are. For example, the simplest thing to do what you describe would be to change the div height until it becomes zero. Something like:
function collapseContent () {
var height = parseInt(content.style.height);
if (!height) {
height = content.offsetHeight; // if height attribute is undefined then
// use the actual height of the div
}
height -= 10; // reduce height 10 pixels at a time
if (height < 0) height = 0;
content.style.height = height + 'px';
if (height > 0) {
// keep doing this until height is zero:
setTimeout(collapseContent,100);
}
}
But that's not how the example jQuery plugin does it. It looke like it moves the element by shifting its top and left style attribute and hides content off screen by using a container div with overflow:hidden.
My solution uses a css transition:
<style type="text/css">
#slider {
box-sizing: border-box;
transition: height 1s ease;
overflow: hidden;
}
</style>
<div id="slider" style="height: 0">
line 1<br>
line 2<br>
line 3
</div>
<script>
function slideDown(){
var ele = document.getElementById('slider');
ele.style.height = "3.3em";
// avoid scrollbar during slide down
setTimeout( function(){
ele.style.overflow = "auto";
}.bind(ele), 1000 ); // according to height animation
}
function slideUp(){
var ele = document.getElementById('slider');
ele.style.overflow = "hidden";
ele.style.height = "0";
}
</script>