First of all I want say sorry for my bad english and I will try my best to get help and help you help me out.
Well i have a project for my web designer class and my teacher wants me to do a gallery html page but I could not find any answer or anything close to what I am looking for.
Well i will explain how he wants...
Let's imagine a gallery page with 3 thumbnail photos.
Then the first thumbnail it's an airplane, the second it's a boat, the third it's a car.
Now if I click on the Airplane thumbnail it should only display slideshow of Airplanes and if I click on the Car Thumbnail it should only display Car images in the slideshow ... Did anybody understood what i meant? please if not i will explain it better.
Thank you so much, and again please sorry for my bad english and explanation.
This is what i currently have from now but when I click on the first image it opens the one I click and when I click next go to the next one on the side of it
Are you referring to a carousel? When you click on a thumbnail do you want a popover to appear and have carousel characteristics? To navigate from one picture to another.
If it's possible could you show your code in jsfiddle.net please?
Let's say the slideshow function looks a bit like this:
function slideShow() {
var slideShowImages = new Array();
slideShow.prototype.load = function(img){ /*loads img into array*/ };
slideShow.prototype.start = function(){ /*starts the slideshow*/ };
slideShow.prototype.stop = function() { /*stops slideshow*/ };
slideShow.prototype.empty = function() { /*empties array*/ };
};
To make sure you only show the images of a certain vehicle place them in an array:
var airplanes = new Array();
var cars = new Array();
var boats = new Array();
Then when loading all images, place them in the right array:
var boatImg = new Image();
boatImg.src = theSourceOfImage;
boatImg.addEventListener('load', function() { boats.push(boatImg) });
//etc etc.
Attach a click handler to the thumbnails.
SlideShow = new slideShow();
$("#boatThumbNailId").click(function() {
//now place all of the pictures from the boat array in the slideshow
for(var i = 0; i < boats.length; i++)
SlideShow.load(boats[i]);
//then just start the slideShow
SlideShow.start();
});
I hope this will be of some help to you, good luck.
Related
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.
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)"/>
The code I’m working with is too long to post, so I’ve made a fiddle here: http://jsfiddle.net/Emily92/5b72k225/
This code takes a random image and cuts it up into a number of pieces depending on the class that is applied in the div which contains the image.
When the page loads, a random image is selected from the array and the class is applied to it, what I’m trying to do is create a separate div, which when clicked on will reload the div containing the image. The result I’m looking for is for the image to be replaced by a new random image with the class applied to it.
Right now, the only way I can make a new image appear in the div is to reload the entire page, ideally this would be achieved by just having the div reload instead of all the other page elements reloading too.
I haven’t been able to do this so far but have received some help on here on how to reload an image and class on click of a div, lines 980-1018 of the Javascript code in the jsfiddle is the current attempt at achieving this, but solving this problem seems much more complicated as the image is being manipulated by the Javascript code, so perhaps this needs to also be reloaded at the same time as the new randomised image is selected?
This is the current attempt at solving this problem:
$(function() {
var imageArray = [
'http://www.webdesignhot.com/wp-content/uploads/2009/10/CatsVectorImage.jpg',
'http://www.costume-works.com/images/halloween_cat_in_witch_hat.jpg',
'http://onthewight.com/wp-content/2013/04/sooty-ryde.jpg'];
reloadImages(imageArray);
$('#reload').on('click',function(){
$( "#masterdiv img[id^='div']" ).each(function(index){
$(this).removeClass("jqPuzzle jqp-r"+(index+3)+"-c"+(index+3)+"-SCN");
$(this).fadeOut( "slow", function() {
if(index==0) {
reloadImages(imageArray);
}
$(this).addClass("jqPuzzle jqp-r"+(index+3)+"-c"+(index+3)+"-SCN");
$(this).fadeIn();
});
});
});
});
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
function reloadImages(array){
shuffleArray(array);
for(var i=0;i<3;i++){
// places the first image into all divs
document.getElementById('div'+(i+1)+'id').src=array[0];
}
}
I’ve written more details on the issue in the html section of the jsfiddle. I'd really appreciate any advice in solving this and thank you for any help in advance!
The plugin reads the images' src before page load, takes them and then generates the puzzle. As such, you can not just update the images as they're not there anymore. So you'd have to clear the divs under each difficulty classes (easyDiv,mediumDiv,hardDiv), append a new <img> under each div then calls / reload the plugin. Updated code in : http://jsfiddle.net/5b72k225/6/
Changes I've made:
Separate old reloadImages into initImages and reloadImages. initImages is called in the beginning, while reloadImages is called when reloading.
Created new function makePuzzle by taking out the intialization of the plugin from $(document).ready() block, so makePuzzle can be called after reloading new image.
The new $(document).ready() block now initializes the images and attaches click event handler to the button. When clicked, divs are emptied, new <img>s inserted and plugin is called.
I have an array of images where they randomly come up on the screen, and the user is required to click on the images that applies to them.
Now what I need is How would I monitor which image they clicked so as the developer I know which images apply to them? I can also make something like a list of images they clicked on the bottom of the screen.
Would anyone show me directions on how would I go on doing this because I don't have a clue to where to start from. Thank you
This is how I generated the random images
var imageArray = new Array();
imageArray[0] = new Image();
imageArray[0].src = "football.png";
imageArray[1] = new Image();
imageArray[1].src = "painting.png";
var randomImage = imageArray[Math.floor(Math.random() * imageArray.length)];
var hobby = new Bitmap(randomImage);
What I would do is give each of the images an ID, I would probably give them numbers.
Then adding this to your script for each image.
document.getElementById(insert image id here).onclick = function() {
//Enter what happens when the user clicks the image here.
};
You can also do it using jquery like so:
$("#insert image ID").click(function(){
//Enter what happens when the user clicks the image here.
});
There is probably a better way to do this, but I cant really imagine it right now :)
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);
}