I am trying to get the same effect as this site (I don't think you can see it if you don't register). Here's the image that describes it
As you can see when I hover on the image, it shows this box and then when I hover on youtube it automatically plays the trailer of the movie. How the hell can I do this? This just seems to be pretty amazing to me. I am guessing that they are doing this on real time
The part where you hover an image, that plugin is called a ToolTip. You can basically load up any html in it as you wish. Take a look at qTip.
As for playing a youtube video on hover. This is using the youtube javascript API. You can start the video right after the tooltip pops up, etc. API here.
you would want to use qTip for this.
Hey! I baked something for you here demo.
also a similar demo here.
Related
i was wondering how can i create image slider like YouTube channel. when there is many video on a channel YouTube put them in a slider and we have back and forth button to see other video which doesn't show on the page and when we click on this back or forth button which are on different side of screen image start to move to left or right. two properties are important to me. 1. image slide from left to right or vise versa and 2. i can click on those image and go to another page.i mean image become clickable. i search image slider in Google but all i'v got was those image slider which we put under the banner for showcase. i don't know if the real name of this method is image slider. please give me a post or URL tutorial or even a YouTube video about create this kind of stuff. tank you very much
Yes, it's called an image slider.
Where do you want to use it? If you want to create your own, this question might help you: How to build simple jQuery image slider with sliding or opacity effect?
Have a look at this page for a multi-image-at-once slider implementation: http://bxslider.com/examples/carousel-demystified
Have a look at this website for a showcase of the different types of sliders available: http://www.jssor.com/
I am in search of a slider in which the slider should hover on the preview image itself. I searched in google but they are not available for free of cost. Any free plugins? Please post the link.
I have to get a slider same as the below image.
Online there are plenty of sliders and is fairly easy to create your own. I put the link of one that I really like and that you can customize to your liking.
http://fotorama.io/
Take a look to customize link-> http://fotorama.io/customize/
I want to an image gallery. On the left side all thumbnails are there. When i mouse hover into thumbnail, the full image will be displayed into the left side div or table. So please tell me the correct code or plugin or anything.
The image gallery exactly looks http://www.rakindia.com/products.aspx?subcat=SW-0000702
Please friends i am trying from 2 days i can't find any plugin and code. Please help me
(i AM TRYING FOR MULTIPLE IMAGES)
I would do it inline to save overhead. You do not need a plugin for such a simple request, not even jQuery, but pure javascript.
DEMO http://jsfiddle.net/8U3C7/
Swap the src image on mouse down
<img src="myFirstImage.jpg" onmousedown="document.swap.src='myFirstImage.jpg';" />
Although you didn't explain yourself clearly, this is a WORKING DEMO for you. Next time try describe yourself better in English, and show people at least what you have tried not to ask for a simple solution.
Uses just plain js and css.
function updateIMG(e) {
document.getElementById("preview").src = e;
}
try this plugin it's quite similar to against your requirement: Galleriffic
I have a Photoshop image that I have created for December 1st. This image will be used as a calendar for an intranet site. Like any normal calendar, it has a door that I wish the user to press. I have a copy of the original document and in place of the door when the user presses this I want to show the new image so it looks like the user has reveled what is behind the door.
I thought I could achieve this task using Photoshop's slice tool. I can achieve this if my calendar door links to a URL, but not another .jpg file.
I also thought I might be able to complete this in Flash by importing my .jpg file and creating a link, but once again I think this is just for URL's.
I know that there is a better way to do this but I am short on time. Would ActionScript in Flash enable me to complete this task?
My original web site that will contain this image is Visual Studio 2005. It has some very basic JavaScript which automatically loads the correct image for each day (since I need 25 of these for the month of December [Day1.jpg, Day2.jpg etc etc]). This works fine. I just need to create the calendar images for each day and the content behind the door.
Yes, a simple actionscript using flash will help you. You can create a document with a button (the button will be the door, you can fill up the background of the button with the door image). Your flash movie may contain 2 keyframes (1 with the default background including the image-button and another keyframe with the image to be displayed when button-pressed). Add some actionscript for the button (basically a GoToAndPlay(# of keyframe with the image) and also a "stop()" action on the image keyframe. Here is a basic example on YouTube Click here. By the kind of thing I guess you want, a little bit of flash animation will make it look better i.e. (door opening clip, 2nd image slide, etc)
As Chris said, a simple JavaScript image swapping code will work too. Here are a couple of examples in StackOverFlow Click Here.
Also you can try some CSS, for example a DIV with the background door and a Hover action that sprite the background to the calendar (click would not be necessary, just hover). Here is a video
I hope any of those solution will work for you, I recommend the CSS one, because it can work with mobile devices, don't require javascript to be enabled, and it's fast and easy.
The Question:
I would like to use the slide-show I currently have in place BUT with the option of clicking the image to enlarge. Enlarge would use a lightbox (you know, all fancy pants style)
Here is the page I am working with as an example:
http://newsite.702wedding.com/valley-of-fire-weddings.aspx
The slide-show is on the right, again, I just need to be able to click the image and enlarge it. While maintaining the arrows functionality.
Any Help Would be Greatly appreciated.
Search colorbox, it is very popular, very light, very versatile. But my personal favourite is Fancybox.
I recently had to do something similar and couldn't find anything already out there. So I combined Fancybox with tinySlideshow.
http://jsfiddle.net/AmT8x/23/
It's not the cleanest solution, but it did the job I needed it for.