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);
}
Related
I am trying to make a sort of image library where the user can view a series of thumbnails and click on them to view them in full size. I have managed to make this work but the way I have done it requires lots of repetitive code. Here is an example of what I have for each image:
script
function load1() {
document.getElementById('wup').src = document.getElementById('wop1').src
var myElement = document.querySelector("#wup");
myElement.style.visibility = "visible";
var myElementB = document.querySelector("button");
myElementB.style.visibility = "visible";
var myElementC = document.querySelector("#cover");
myElementC.style.visibility = "visible";
}
Pretty much what happens is every thumbnail (there are quite a lot) has one of these functions that runs when clicked. It makes a large image in the center of the screen appear, and the source of the image is whatever thumbnail was clicked. While this method does work, it requires lots of what feels like unnecessary repetition.
What I am looking for:
A simple and efficient way to do the same thing.
Any help would be much appreciated! Thanks.
Just create a function that does this for each element.
function showLargeImage(thumbnail) {
document.getElementById('wup').src = thumbnail.src
document.querySelector("#wup").style.visibility = "visible";
document.querySelector("button").style.visibility = "visible";
document.querySelector("#cover").style.visibility = "visible";
}
Then for each image just call the function onclick.
<img id="wop" src="foo.jpg" onclick="showLargeImage(this)"/>
Hi all you JavaScript/jquery gurus out there.
I hope someone is able to help me since I am pretty much stuck trying to combine MagnificPopup with ElevateZoom.
I am able to get ElevateZoom to work if there is only one image. But in gallery mode (several images) then it fails badly.
Here is an example of it working with one image.
You can see the image behind the popup. If there are several images it does not Work.
I have made a few changes to magnificpopup.js :
In "open: function(data){..."
I have added
$(".mfp-img").elevateZoom();
just before
return data;
In "getImage: function (item, template) {..."
I have added
var att = document.createAttribute('data-zoom-image');
att.value = item.src;
img.setAttributeNode(att);
just before
item.img = $(img).on('load.mfploader', onLoadComplete).on('error.mfploader', onLoadError);
img.src = item.src;
This Works well but only with one image. As soon as there are more it fails. Unfortunately I am not able to figure out the modification needed myself. Any help will be highly appreciated.
Best regards
Nicki
I figured it out!
Instead of the code i added above, I did the following:
In "getImage: function (item, template) {..."
Just before
_mfpTrigger('ImageLoadComplete');
I have added
$("#" + item.img[0].id).elevateZoom();
In "close: function () {..."
Just before
mfp.isOpen = false;
I have added
$('.zoomContainer').remove();
In "getImage: function (item, template) {..."
I have added
img.id = item.el[0].id;
var att = document.createAttribute('data-zoom-image');
att.value = item.src;
img.setAttributeNode(att);
just before
item.img = $(img).on('load.mfploader', onLoadComplete).on('error.mfploader', onLoadError);
img.src = item.src;
Now everything Works regardless of the number of images used.
Best regards
thank you for this walkthrough!
I would suggest to add the
$('.zoomContainer').remove();
also at the beginning of "getImage: function (item, template) {...",
so there is only one zoomContainer, when you slide through several images.
...but for some reason it won't work. Beginner here, so if someone could explain what I'm doing wrong, I'd really appreciate it. xD
http://codepen.io/DylanEspey/pen/xgwJr An example Codepen I threw together really quick to try to illustrate my problem.
I hate that I've had to ask so many questions, but this is my first project where I've kind of had my own leeway, and I've been struggling to get it done before deadlines so I can impress people. xD That and college has made my schedule a mess, so I've been making really dumb mistakes. That, and I just started learning Javascript a few weeks ago...
The problem is that the overlay used for your fade effect is preventing you from clicking on the image which is underneath it. The solution is to, instead of listening for a click on the image, listen for it on the overlay, and adjust the references accordingly.
I have forked your codepen to reflect this: http://codepen.io/anon/pen/qlkob
JS:
$(document).ready(function() {
$('.thumbnails .overlay').click(function() {
var img = $(this).find('img')[0];
var thmb = img;
var src = img.src;
$('.project-img img').fadeOut(400,function(){
thmb.src = this.src;
$(this).attr('src', src).fadeIn(400);
});
});
});
Try this:
$('.thumbnails img').click(function () {
var thmb = this;
var src = this.src;
$('.project-img img').fadeOut(400, function () {
thmb.src = this.src;
$(this).attr('src', src).fadeIn(400);
});
});
Fiddle Demo
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/
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.