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)"/>
Related
I now have a player icon that changes to the pause-icon when playing. I'm using this code for changing it:
<script>
var onImg= "img/play.svg";
var offImg= "img/pause.svg";
</script>
However it only goes one-way and don't revert back to the play icon when clicked yet again. How can I archive this? I can only find jQuery code, but I want to have a solution thats not dependent on any libraries.
Link to demo: http://mortenhjort.dk/synchub/v2/ (first cover works with audio)
Take a look at this:
var on = "http://webneel.com/wallpaper/sites/default/files/images/04-2013/15-beach-sea-photography.preview.jpg";
var off = "https://s13.postimg.org/lzdaqr6fr/15_beach_sea_photography_preview_Convert_Image.jpg";
var state = false;
var img = document.getElementById("img");
img.onclick = function(){
if(state){
img.src = off;
state = false;
}
else{
img.src = on;
state = true;
}
}
<img src="http://webneel.com/wallpaper/sites/default/files/images/04-2013/15-beach-sea-photography.preview.jpg" id="img">
The solution is the same when you need to change the play icon with a pause icon... hope it helps :)
You can change image src attribute using pure javascript function as follows
img.setAttribute('src',"http://cdn-images.deezer.com/images/cover/fd198aa0a511e33d42c787a364434962/400x400-000000-80-0-0.jpg")
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 :)
im new to most web dev stuff so im kindly asking you for some support.
i have an image map in which i have assigned several areas triggering different contents in a separate div. i would now like to add a delay to the onmouseover trigger so that the content in the div is only updated if the user positions the curser on the area instead of accidentally hovering over it.
this is the js i use for toggling the div contents:
function showHideDivs(indx){
hideDivs();
oShowHideDivs[indx].style.display = 'block';
}
function hideDivs(){
for(i=0; i < oShowHideDivs.length; i++){
oShowHideDivs[i].style.display = 'none';
}
}
window.onload=function(){
oShowHideDivs = document.getElementById('container').getElementsByTagName('div');
var oMap = document.getElementById('myMap');
for(i=0; i < oMap.areas.length; i++){
oMap.areas[i].indx = i;
oMap.areas[i].onmouseover=function(){
showHideDivs(this.indx);
}
}
}
so how do i implement the delay and where? thx in advance!
jan
EDIT:
i used this approach now:
oMap.areas[i].onmouseover=function(){
var area=this;
var delay=setTimeout(function(){showHideDivs(area.indx);},100);
area.onmouseout=function(){clearTimeout(delay);};
}
seemed the easiest to me. thx for the hint!
The easiest way is to include a timeout on mouseover, and clear it on mouseout.
oMap.areas[i].onmouseover=function(){
var area=this;
var delay=setTimeout(function(){showHideDivs(area.indx);},100);
area.onmouseout=function(){clearTimeout(delay);};
}
For more complex scenarios, use a plugin like hoverintent.
You need to use setTimeout() to call your function showHideDivs() after a certain delay. And you stop this function from being called if the user moves its mouse before the end of your delay.
Look here for a concrete example : https://stackoverflow.com/a/6231142/1606729
I have some CSS that renders correctly normally when it's not being animated but doesn't render correctly when animated. Some clipping that should occur does not during the animation but snaps back as soon as it finishes.
The last frame is what it looks like after it animates.
It only happens when I select the elements by class (i.e. $('[class="chatbubble"] :first')).
If I attach an id to the div and select it via $('#id'), it animates perfectly.
Here is my animation code:
function animate() {
var dom = $('[class="chatbubble"] :first');
var chatmessage = dom.find('[class="chatmessage"]');
var speed = 1500;
soundManager.play('bloop');
var wd = dom.width();
var ht = dom.height();
var fs = chatmessage.css('fontSize');
dom.css('width',0);
dom.css('marginTop',parseInt(ht/9));
dom.animate({ width:wd, marginTop:0 },speed).css('overflow', 'visible');
chatmessage.css('font-size',0);
chatmessage.animate({ fontSize:fs },speed).css('overflow', 'visible');
}
I'm not very familiar with jQuery so I don't know what could be causing it.
Can anyone help?
Oh god, I can't believe this. I found the solution 5 minutes after I posted it.
The solution was to simply use the $('#chatbox').find('[class="chatbubble"]:first') as the selector instead of $('#chatbox').find('[class="chatbubble"] :first').
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);
}