I have a bunch of animated gifs posted on my blog and i would like to add a Play Button over each image to be able to play them when you click over them.
You will need two images. One image that is just the first frame with no animation. Then, wire up the click to replace that static image with your animated image.
Something like so:
$(function(){
$('#StaticImage').click(function(){
$(this).attr('src', 'animated_file.gif');
});
});
Related
I am hoping to re-create a gallery just like the one of the iPhone 6s Image Gallery demo. I like how they have created each image a different size tile and that as you scroll, the image very slowly scrolls with it.
LINK HERE
I have created a similar image gallery like the example, but I am not sure how to:
1) Re-create the parallax easing on the images as it scrolls
2) Have all images fade-in on load
Could someone help?
FIDDLE HERE
There is couple ways to do this.
You could use parallax effects,transform/translateY or
$('#outer').bind('mousewheel', function (e) {
if (!(e.originalEvent.wheelDelta == 120))
The full function is in the link.
Now for fading in the picture on load(You can do on scroll as well), it depends if you want and can use jQuery, as it's the simplest.
$(window).load(function(){
$('img').not(':visible').fadeIn(1000);
});
function makeVisible() {
$('img').load(function () {
$(this).fadeIn(1000);
});
});
makeVisible();
This is just a general direction, there are more than one way to do this, I have listed what would be the simplest way to me.
have a very basic page that I am working on that contains thumbnail images and a main image. When the thumbnail images are clicked I am using document.getElementById to change the main image. Easy to do but I now want to change my main image from landscape to portrait. This will mean that now when clicking the thumbnail I will not only need to change the main image but also the div tag dimensions. I am new to Javascript and was wondering if someone could give me a quick point in the right direction of how to go about this.
Thank you in advance for any help,
Margate
I would suggest adding/changing a CSS style class on the element and then configuring that class with all the necessary modifications. There's a lot you can do with just CSS.
You can either use a semi colon in your onclick event and add more javascript calls, or create a JavaScript function that will do all of your neccesary changes and call that method from your onclick event.
function changeStuff(){
document.getElementById("myThing").DoStuff()
document.getElementById("myOtherThing").DoOtherStuff()
}
<div id="myThing">
<img id="myOtherThing" onclick="cangeStuff();"></img>
</div>
each post in my website, contains a photo gallery. The gallery consists of thumbnail images which link to full-size images.
I have also placed a PinIt button in my posts. The problem is that it catches thumbnail images for pining.
Based on what I've found about this kind of issue, I ended up with the following code which should exclude thumbnails from pining, and include full-size images instead. None of these, is donw though...
<a href="path_to_full_image" rel="lightbox[single_post]" pi:pinit:media="path_to_full_image">
<img src="path_to_thumbnail" width="200" height="130" nopin="nopin" />
</a>
Any suggestions?
We can avoid showing an image in the pin action just by using nopin = "nopin" in the image attribute.
For eg.,
<img src="http://via.placeholder.com/350x150" nopin = "nopin" />
In order for the PinIt button to pick full-size images they should be loaded and visible on the page. Since they are not, it cannot grab them to the grid gallery. As a workaround I would suggest to have a custom logic that pre-loads full-sized images before triggering the PinIt button click event. Something like this:
$('a[rel="lightbox"]').each(function(){
image_src = $(this).attr('href');
$('<img/>').attr('src',image_src).appendTo('#imageContainer');
;
})
$('#pinItButton').trigger('click');
This way you will pre-load all the images and put them into imageContainer block and then trigger a click that will open Grid Gallery to pick an image.
Hope it helps.
in my app i have a background image and need to place an image button at the specified location of the background image.i did by using frame layout with android:layout_gravity,layout_alignBottom and marginLeft and right properties. please refer image no :1
i set it for one emulator and it works but i get wrong when launch other emulator of different size so how to set image view over a background image so that imageview not changes its position for any size of screen.
Is there any possibilities to trigger action find by touching image button on the screen(both background image and image button combined as single image - please refer Image no 2)
For this kind of problem, I would think that the best solution in order not to have problem with the screen sizes/densities would be to have different images for the play phase, stop etc.
Thus having:
microphone with play button: 1 image
microphone with stop button: 1 image
microphone with play selected button: 1 image
Etc. and handling the user events.
Hope this helps!
Hi am making a small HTML5 canvas demo.
I initiated the canvas using modernizer from O'Reilly's HTML5 text.
This is for iPad so my canvas is 1024 by 768.
I then load in a background image in my DrawScreen function.
var backgroundImage = new Image();
backgroundImage.src = "images/background.jpg";
backgroundImage.onload = function(){
context.drawImage(backgroundImage,0,0);
}
I want to add text to this then. So I do:
function drawText(){
context.fillStyle ="gray";
context.font = "28px Helvetica";
context.fillText(message, 260, 700);
}
I then call both functions:
DrawScreen();
DrawText();
However my background image totally over writes my text. Or is on top of it. If I disable DrawScreen(); I can see the text. Changing the function order doesn't make a differnce...
How to do this? I feel so stupid that am stuck on something that seems so elementary.
Thanks
The problem is that your image is being drawn after -- and therefore on top of -- your text. This is because of the time it takes the image to load. Basically, what's happening is this:
You call your DrawScreen function
You start loading your background image by assigning the src attribute
You assign the onload() handler to fire once the image has finished loading.
DrawScreen exits, having completed all its work
You call DrawText, which immediately draws the text
At some point later, the image finishes loading, fires the onload() event, and you draw the background image.
I'd suggest restructuring your code so that all the drawing is kicked off by the successful loading of the image. That way, nothing asynchronous will be going on, and the image will be drawn, followed by the text.
Here's a quick example, on jsFiddle.