hover over video with text and lightbox effects - php

I have to develop my video page using php which is similar to gallery with hover effects. If i hover over the video, the name of the video need to be displayed than i click the name, the video should be come as lightbox. Kindly suggest some solutions for this. I'm very struggling in this concept. Thanks in advance

PHP is a server-side scripting language, it is not suitable for "developing styles", you should use a combination of CSS and JS instead.
Lightbox - here is a complete tutorial.

Related

image preview on html video

hello I want to build a video web site, where the videos once you pass your mouse over the progress bar you could see a image preview of the video you are watching like youtube for example , so I want to know please what is the better way to do this on php and jquery.
There are some out-of-the-box alternatives, like JWPlayer. It's very flexible there's an example of what you're trying to do here.

popup window resource like spotify share window

I'm looking for creating a tiny popup window on a mouse click that is similar to the spotify window that contains the link and share icons. Modal windows and alert windows are in the center of the page and not what I am looking for. What I want is a small window that opens right next to the link they click on.
Any resources on the internet? I have no issues paying for resources.
I'd like it to be driven by jQuery if possible.
Thanks!
The simplest way to create this menu (that I can think of) is having the menu element inline but hidden. Then using jQuery's onclick, have the element revealed. A combination of relative and absolute positioning is used to make the menu appear to the bottom right of the menu button (this article is a great resource for explaining this trick). I've modeled the demo below from the Spotify desktop UI using these principles.
jsFiddle Demo

Html 5 content placeholder

I have a requirement like what we can see in the below link,
http://custom.case-mate.com/diy?bypassLandingPage=true#design/iphone5_barelythere
after opening the link please select a layout from the left side of the editor, then a placeholder section will come over the canvas!, how i can achieve the same? are they using html or image? is there any specific libraries available which can help me achieve this ?
I know they are using jquery UI droppable for dragging and placing the image over the place holders, but how that layout area over the canvas works ?
I am using fabric.js in my project!
Thanks in advance for any help,
looking the editor with firebug you can see there are 4 total elements, with one of them being a ui-droppable item.
there are many libraries aorund that extend default behaviour, raphaelJS kinetikJs, threeJs; with a rapid google search this link came out

Preview video from thumbnail

Recently stumbled upon a stock video footage site http://www.pond5.com/stock-video-footage/1/*.html , and saw that they had a preview of a video when the user hovered over a thumbnail. I want to recreate this, because it seems like useful practice and it will allow me to workout my web developing muscles.
I would like to be able to preview a video when a user hovers over a thumbnail.
For example like pond5.com. Audio is not necessary, but I would like it to look smooth like a video rather than a video preview that contains a frame every 5 seconds.
On pond5.com, I originally thought they used a gif, but it plays very smoothly. Some also contain audio. As far as I thought, audio can't be used in .GIFs
Is this a case where I would have to just upload a 2nd video for the preview?
Thank you for any help.
Pond5, the website you specifically mentioned, creates a video thumbnail with watermark and lowered quality and stores it. It is then played back using JavaScript to dynamically load a div element that contains the flash player. So no GIFs are involved. You do need to upload a 2nd video, but the steps to this project are as follows:
Server-side video thumbnail/watermarking: Not sure if there are any PHP packages that are up to the task on this one. I would write a more powerful program in C++ or C#. If you go with C#, quick and easy solution would be Microsoft Expression Encoder.
Flash/Silverlight/HTML5 video player: To play the video.
Client-side JavaScript: To load the fancy popup and the aforementioned video player. Note that you might need to use PHP and a database engine to load the thumbnail URL for the video requested.
This is what Pond5, and what many other stock-footage sites use, and the basic outline of what you would need to do to achieve similar results.

Tooltip cut into iframe

In my web site I have an iframe tag with several little images, when I pass my mouse (onmouseover) I show the more large image (tooltip) but only a liitle part is showed due the iframe.
There is someone that can tell me how show the tooltip into iframe over the parent page?
(without use JQuery)
Thanks a lot
I have implemented a jQuery solution for tooltips inside iframe
Here is the code:
https://github.com/TeamTypeform/Tooltip

Categories