Ok, so I'm trying to implement a sliding video thumb gallery linked to a lightbox similar to the home page of reason.com but I would like to do it in pure CSS if possible. I already have the code complete for the lightbox which is basically pure CSS with a javascript:void function linking thumbs to the lightbox.
My issue is that I plan on updating the videos daily since it is for an article database and would rather not have to capture the video thumbs for every video upon updating.
Is there a way to dynamically capture thumbs of videos with a PHP script and including the script in my javascript:void link that will display the thumb for my lightbox? I'm basically trying to find a work around for capturing and resizing the thumbs for all of the videos in my thumb slider because this would be increasingly teadious to do on a daily basis.
Thanks in advance for any suggestions!
CSS:
.black_alpha{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.video {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
HTML:
<body>
**I want each thumb to link to this** <a href = "javascript:void(0)" onclick =
"document.getElementById('light').style.display='block'document.getElementById
('fade').style.display='block'">
<div id="light" class="video"> **this should show the video of the thumb clicked**
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'"></div>
<div id="fade" class="black_alpha"></div>
</body>
I thought the thumb slider would have been irrelevant so I didn't include it.
You can use ffmpeg to capture images from video. It's easy to use and just needs to be installed on your server. You can run the ffmpeg commands from php using exec() (note: this may need to be enabled in your php.ini)
Related
I want to center an image with unknown width and height in the browser window without any resizing. If the image is wider than the browser width, which I expect it to often be, I want to crop the image rather than resize it. There should not be a horizontal scrollbar.
CSS only solutions are preferred, but PHP is acceptable and JS less desirable but still welcome. Using background images is not ideal.
This question is very similar and I would answer it if I could: Resize browser width and cover photo must retain the center of cropped image
This code block gives a sense of what I've tried, but may not be very helpful:
.banner-container {
display: block;
position: relative;
height: 450px;
overflow: hidden;
}
.banner {
position: absolute;
left: 50%;
margin-right: -50%;
transform: translateX(-50%);
/*height: 450px;*/
/*
display: table-cell;
vertical-align: middle
*/
/*justify-content: center;*/
/*margin: 0 auto;*/
/*object-fit: cover;*/
}
<div class="banner-container">
<img class="banner" src="https://i.stack.imgur.com/ppDo7.png">
</div>'
You can use an img element which I see you prefer.
This snippet uses one of the methods you tried to center it - to get the left/right centering it moves the img to have the left as the center of the div, then moves it back by half its width.
It does not try centering vertically as the requirement seems to be to have the img height the full height of the banner, but this could of course be changed if wanted.
Note that to stop overflow being shown with a scrollbar the correct setting is overflow: hidden, not hide as in the given code.
.banner-container {
display: block;
position: relative;
height: 450px;
overflow: hidden;
}
.banner {
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100%;
}
<div class="banner-container">
<img class="banner" src="https://i.stack.imgur.com/ppDo7.png">
</div>'
For clarification, this is the CSS that worked in my situation:
.banner-container {
position: relative;
height: 450px;
}
.banner {
height: 100%;
object-fit: cover;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
As described in the comment to A Haworth's answer, Imagify was replacing <img> tags with <picture>, which interferes with the style structure. Since Imagify's optimizations are used in current posting habits and the conversion to <picture> is generally desired, I avoid the conversion simply by only using .webp images for this banner.
(This is for desktop. Smaller screens get different images and have modified behavior for better performance and appearance.)
I want to set permanently video icon on image, but i can't. When i do that, two image are showing: 1. video icon 2. my image, but not adjust 1 and 2 at once one image.
More Clearly: I wants to share a photo with video icon. I have image without video logo. I wants to add video logo on image using code. I don't wants to set logo using photoshop.
HTML:
<div class="video">
<img style="height:200px" src="http://i.imgur.com/GMjqTR7.jpg"/>
</div>
CSS:
.video {
position: relative;
}
.video a {
position: absolute;
display: block;
background: url(/images/play-btn.png);
height: 100%;
width: 100%;
top: 75px;
left: 150px;
background-size: 50px 50px;
background-repeat: no-repeat;
}
Please Help Me. Thanks.
JSFiddle - Live
This can be done on the client or server side. Based on the fact that your example only contains front-end code, I'll assume you want to this on the front-end.
Take a look at watermak js
http://brianium.github.io/watermarkjs/
For a server-side example, see this answer
Add 'Watermark' to images with php
I'm building a Wordpress theme that will use imported posts from another site.
These posts have images that vary in size and aspect ratio.
There are predefined areas on the new theme where these image must fit, and fill the area, with centering and without letterboxing.
Without breaking the semantics of the img tag by using background images, I've put together a few techniques I've seen elsewhere to scale images and fit/center them to a panel, like this:
CSS:
.fillwidth {
width: 100%;
height: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.fillheight {
height: 100%;
width: auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
div {
border: 1px solid black;
overflow: hidden;
position: relative;
}
JS:
<script src="http://localhost/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<script>
(function($){
$('div').each(function() {
var fillClass = ($(this).height() > $(this).width())
? 'fillheight'
: 'fillwidth';
$(this).find('img').addClass(fillClass);
});
})(window.jQuery);
</script>
HTML:
<div>
<img src="test.jpg" />
</div>
So basically the JS determines the aspect ratio, the image is fit to the box and a transform centers it.
Now my question is, on a high traffic Wordpress site, would you recommend allowing the user's browser to do this resizing on the front end, or should the theme create multiple versions of uploaded images to fit the various panels on the site in advance? With modern browsers what is the impact of asking the browser to do the scaling and resizing of images?
I want my page's logo and articles to be in the center of the site. At the moment everything is on the left.
I just can't make it work.
For Example I tried to delete the wrapper and set margin-left:auto; margin-right:auto; in the logo's class. nothing works.
And for the posts i just don't know where to start. probably i would have to put everything in a container and make that central? (There should be three posts in a row, at the moment the theme stacks them up to the right screen border if you have a big screen)
Thank you so much.
EDIT: The Text align in the image class did the job. Thank you guys, question answered!
#logobild {
margin-left: auto;
margin-right: auto;
text-align: center;
}
That will do it for you :) Your header takes up 100% of the space, so the content inside has no fixed dimensions to center against. The text-align value assists with that.
Try:
#logobild {
margin-left: auto;
margin-right: auto;
text-align: center;
}
To center the logo you can do the following in CSS:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
The img element is inline by default, which means your margin styles won't be applied to it. When it is set to block level the margin settings will work.
To center the articles I suggest you give a width to the container div like this:
#post-area {
width: 85%;
margin-left: auto;
margin-right: auto;
}
I'm not sure if that's the best way, but it seems to work.
I have a little problem. At the end of my R script I create an image .png as output. I wanna show this image on my website but sometimes it is drawn, sometimes it is not drawn. I don't understand how it is possible. I`ll put my code:
I insert the image in a div with this features:
#diagramm {
position: relative;
border: 2px solid #333;
border-color: #6495ED;
width: 820px;
height: 370px;
margin: 2px auto;
margin-top: 2em;
background-image: url("/home/daniele/public_html/appweb2013/venn_final/fungo_final.png");
}
Where is the mistake? Can I use a better method?
This is CSS, it only puts specific design rules for an element that has the id diagramm.
So what you've posted is not code so to speak.
In what way do you generate the output? When? what does the user do to generate it etc.
Do you have any javascript or html code you can show?