Changing background images, Jquery + CSS - javascript

I am working on a clients website and want the background images on the "cruise_offers" div to change, possibly only 3 - 4 images in rotation.
My jquery knowledge is quite basic so any help would be great.
I would prefer it to work with jQuery as I am using it elsewhere on the site.
My markup:
<div class="cruise_offers">
<span class="overlay_bar">
View our Great Cruise Offers
</span>
</div>
Cheers
Rory

Check out this link - I worked on something similar and it may help:
I found a jquery image rotatation script and adding hyperlinks to the images breaks the animation

$(div.cruise_offers).removeClass('cruise_offers');
$(div.cruise_offers).addClass('cruise_offers1');
create classes in your css with different background images.

Maybe something like this would work (I haven't tested it).
var current_image = 0;
var rotation_speed = 5000; //milliseconds
var where = $("div.cruise_offers");
var images = new Array();
images[0] = 'img1.jpg';
images[1] = 'img2.jpg';
function change_image() {
current_image++;
if (images[current_image].length == 0) {
current_image = 0;
}
$(where).css("background-image", "url("+images[current_image]+")")
}
if (where.length != 0) {
setTimeout("change_image()", rotation_speed);
}

Check out the Cycle plugin and visit the demos at the bottom of the page to get started.

Related

JavaScript Image Preload in function

first of all I don't really know anything about JavaScript.
I have a website slideshow with the following code:
//* Slideshow 1 *//
var slider_img_1 = document.querySelector(".image_slide_1");
var images_1 = ["fabric1_1.jpg", "fabric1_2.jpg", "fabric1_3.jpg", "fabric1_4.jpg", "fabric1_5.jpg"];
var i = 0;
//* Slideshow 2 *//
var slider_img_2 = document.querySelector(".image_slide_2");
var images_2 = ["book1_1.jpg", "book1_2.jpg", "book1_3.jpg", "book1_4.jpg", "book1_5.jpg", "book1_6.jpg", "book1_7.jpg"];
var j = 0;
When clicking on the slideshow the images cycle through.
Is it possible to let the images inside the var brackets preload, because currently they only start loading when clicking on the slideshow, which takes a lot of time in my case.
I hope you understand my question well. Thank you guys!
In this use case (if you need to load images with JavaScript) it would probably be best to append you images in to HTML when page is loaded and hide them, with CSS for example, when they shouldn't be visible.

Strange js behaviour of image gallery

Hi there, I would like to build an image gallery with pure javascript and found a quite good approach http://www.trans4mind.com/personal_development/JavaScript/imageSlideShow.htm.
However, it does not work as expected. Even though I managed to link my Next / Back buttons to switch the images in the array the second image would only appears for a fraction of a second before reverting back to the initial image.
Is there anything messed up in the js?
currentIndex = 0;
MyImages = new Array();
MyImages[0] ="images/sampleimage.jpg";
MyImages[1] ="images/kuh.jpg";
function preload()
{
for (var i=0;i<MyImages.length;i++){
var imagesPreloaded = new Image();
imagesPreloaded.src = MyImages[i];
}
}
preload();
function Nexter(){
if (currentIndex<MyImages.length-1){
currentIndex=currentIndex+1;
document.theImage.src=MyImages[currentIndex];
}
else {
currentIndex=0;
document.theImage.src=MyImages[currentIndex];
}
}
function Backer(){
if (currentIndex>0){
currentIndex=currentIndex-1;
document.theImage.src=MyImages[currentIndex];
}
else {
currentIndex=1;
document.theImage.src=MyImages[currentIndex];
}
}
$("#nav_left").on("click",function(){
Nexter();
});
$("#nav_right").on("click",function(){
Backer();
});
//
//img Gallery
//
$(".gallery_nav img").on("mouseover", function (){
$(this).css("opacity", 0.8);
});
$(".gallery_nav img").on("mouseleave", function (){
$(this).css("opacity", 0.1);
});
Thanks for any useful hints. And BTW: Firebug tells me the following in the console:
Image corrupt or truncated:
Finally, the code above is the maximum extent of js I can deal with at the moment regarding my current level of knowledge and expertise. So please consider this when answering
It looks like the markup of your our link tags () is jacking up or possibly reloading the page - which would reset the gallery back to image #1. Try adding a # to the href attribute of your link markup (to denote them as anchors) or just flat out change them to tags
Example
<img src="images/pfeil_links.svg" alt="First image">
here is an altered JSFiddle that seems to work okay
http://jsfiddle.net/Nf7yR/1/
And here is a version that uses spans; to the same effect:
http://jsfiddle.net/Nf7yR/2/

Image Swap using jQuery

I hope somebody could help me out with this.
I'm working on a portfolio website that currently looks like this:
http://cargocollective.com/shap
As you can see, I have a png image over 15 animated gif thumbnails.
Basically, I want to have some short gif animations popping into some of the screens from a time to time, so what i'm trying to do is to have a script that replaces some of the gifs with others, either randomly OR after a certain amount of time.
I hope that someone can understand what i mean and help me.
__________ *UPDATE*:
Thanks a lot, I really appreciate the help. I'm sorry for the lack of knowladge I have, making it hard for me to use what you just wrote there, but this is what I added to my source code:
<script type="text/javascript">
$(document).ready(function() { changer(); });
function changer() {
var imgnum = Math.floor(15*Math.random());
var time = Math.floor(5000*Math.random());
var $img = $("img").eq(imgnum);
if ($img.attr("src")=="http://payload.cargocollective.com/1/1/39798/479556/prt_166x132_1314132436.gif")
$img.attr("src","http://payload.cargocollective.com/1/1/39798/479849/prt_166x132_1314132538.gif");
else
$img.attr("src","http://payload.cargocollective.com/1/1/39798/479556/prt_166x132_1314132436.gif");
setTimeout(changer,time);
}
</script>
I just copied the URL of 2 of my gif thumbnails and added them to the script, is that absolutely wrong?
Maybe the fact that I'm using the cargocollective system makes things complicated.
Here is what it looks like right now, as you can see, something IS happening, but I can't really control it:
http://cargocollective.com/shap
(after a minute the png overlay is gone for whatever reason)
best,
s
Tube televisions! How wonderfully quaint. ;-)
Well, here's something I tossed together. Obviously you should change the actual image SRCs into something that exists on your server.
http://jsfiddle.net/9KrsV/1/
$(function() { changer(); });
function changer() {
var imgnum = Math.floor(15*Math.random());
var time = Math.floor(5000*Math.random());
var $img = $("img").eq(imgnum);
if ($img.attr("src")=="images/chalk-dotted.png")
$img.attr("src","images/chalk-box.png");
else
$img.attr("src","images/chalk-dotted.png");
setTimeout(changer,time);
}
UPDATE: Obviously, this is pretty narrow. Here's another script that will store the old SRC and eventually flip back to it:
function changer() {
var imgnum = Math.floor(15 * Math.random());
var time = Math.floor(5000 * Math.random());
var $img = $("img").eq(imgnum);
var newsrc = "noisy_static.gif";
if ($img.attr("src") == newsrc) {
$img.attr("src", $img.data("oldsrc"));
} else {
$img.data("oldsrc",$img.attr("src"));
$img.attr("src", newsrc);
}
setTimeout(changer, time);
}

Preloading images with js

I used this tutorial to make image slider at my site. But I have more than 100 images. It will be hard to load everything when page loads. So, any tricks to preload first ~10 images, and when I'll slide to the 9th, for example, load another 10?
Or there is already-prepared plugin for jquery which provides this?
with jquery, something as simple as this works:
$('<img />')[0].src = 'image.jpg';
it creates an element but never adds it to the page
so the image is loaded, but never shown
check the Net panel in firebug to see it loaded.
With jQuery I use this:
(function($) {
var cache = [];
$.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i--;) {
var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
})(jQuery)
jQuery.preLoadImages("/images/img01.jpg","/images/img02.jpg");

Preloading images with Prototype/Scriptaculous

I'm using Prototype/Scriptaculous library for a featured content slider, it works great but the images need to be preloaded.
I've used jQuery mostly so I'm not sure how its done with Prototype. Here's the slider script if you'd like to take a look.
You can do this with a few simple lines of Javascript
var preload = []
for(var x=0;x<slider_images.length;x++) {
preload[x] = new Image()
preload[x].src = slider_images[x]
}

Categories

Resources