Make an img fullscreen when clicked on - javascript

I would like to make an image full screen when clicked on. Similar to hitting f11 in most modern browsers. I've tried screenfull.js but it is really buggy and not cross browser supported that well.
My HTML
<div id="photoFrame">
<img src="uploads/picture01.jpg" class="img" alt="PictureOne" />
<img src="uploads/picture02.jpg" class="img" alt="PictureTwo" />
<img src="uploads/picture03.jpg" class="img" alt="PictureThree" />
... and so on ...
</div>
My CSS
#photoFrame {
clear: both;
margin-left: 0;
width: 100vw;
display: block;
white-space:nowrap;
height:auto;
float:left;
overflow-x:scroll;
overflow-y: hidden;
clear:left;
background-color:#333;
padding-top:40px;
padding-bottom:40px;
}
#photoFrame img {
width:auto;
max-width:80%;
height:50vh;
overflow-x:auto;
overflow-y: hidden;
padding-right:10px;
padding-left:10px;
}
Side Notes
The img class on the elements can be used by any Javascript.
Any help would be great or even a point in the right direction.

Try something like...
$(".img").click(function(){
$(this).height($(window).height());
$(this).width($(window).width());
});
edit
For an f11 style full screen plugin you should check out https://github.com/kayahr/jquery-fullscreen-plugin. Then edit my above code to...
$(".img").click(function(){
$(this).fullScreen(true);
});

You should use a plugin like lytebox which is very simple to use and would give you a good result of what you want to achieve:
http://lytebox.com/
Just download the js from the above site and include that into your page
How to use:
http://lytebox.com/howTo.php
Its pretty simple and exactly what you want to do.

Related

Sticky order review section woocommerce

Im having a bit of trouble getting the review order (in this case enquiry) section to stick to the bottom of the header on scroll.
Ive gone through a few jquery examples with no luck and am now playing around with the sticky position for the element. Using a codepen example and playing around with it ive got it to work alright and have tried replicating it on the page through the inspector with no luck.
Codepen example
HTML
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-content">MAIN CONTENT</div>
<div class="second-content">SECOND CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>
CSS
body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.main-container{ max-width:1000px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
height:50px; background:#aaa; border-color:red;
}
.main-content{
display:inline-block;
width:49%;
height:900px;
}
.second-content{
display:inline;
width: 49%;
height: 200px;
position: sticky;
top:0;
}
https://codepen.io/elad2412/pen/QYLEdK
Website URL
https://trolleys.wpengine.com/
Based on my understanding you would need jQuery to stop it from going through the footer as well correct?
Ive tried going about this a few different ways and tried it on a few different elements, some of which have stuck for a little while but i need to catch the whole column.
This is an example that best shows what im after, tried implementing this but couldnt get it working.
http://jsfiddle.net/bryanjamesross/VtPcm/
Fixed,
Had to give the form a few extra attributes, i was applying them to an outer div.
form.checkout {
height: 1500px;
position:relative;
display:block;
}

Change slider for horizontal scroll?

i've done a horizontal picture gallery from the here: How do I allow horizontal scrolling only for a row of images and show overflow, without horizontally scrolling the rest of the page?
and i was wondering if there is anyway to change the slider at the bottom to something like a nano slider? Something like this:
I'd really appreciate some help
Use overflow-x: auto; on your container (section in your example)
<section>
<div class="pic-container">
<div class="pic-row">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
</div>
</div>
</section>​
CSS:
body {
overflow: hidden;
}
section {
/* The width of your document, I suppose */
width:600px;
margin: 0 auto;
white-space:nowrap;
overflow-x: auto;
}
.pic-container {
/* As large as it needs to be */
width: 1500px;
}​
If i understand correctly, you want to change the styling for the scroll bar. If I'm correct, that isn't difficult. you should use Webkit Scrollbars for this. Here's a pretty good article on it.
you would probably want something like this:
::-webkit-scrollbar-track:horizontal {
height: 3px;
background: gray;
}
::-webkit-scrollbar:horozontal {
background: white;
}
I'm not completely sure about it, thought. It's been a while since I've needed to style scroll bars.
note: since this is webkit it won't work in firefox (or maybe explorer, not sure) as far as I know, the only way to do this would be with javascript.

Add a layer on top of an image that has priority over the image

I'm making a Chrome extension which stops all requests of images and will allow you to click on the broken image icon in order to load the image without the blocking. This is in order to save bandwidth.
I have setup the request blocking but I'm not sure how to go about the next step.
The next step would be adding a layer on top of that broken image icon which would intercept any clicks on that image. The reason I do this is because often an image will be anchored to another link so clicking on it would do something else to what is desired.
I thought of perhaps using the z-index CSS rule but I'm not entirely sure of how this works and also I'm not sure if this would be the best way to go about this.
Any suggestions? Thanks! :)
Add this css to your html
<style type="text/css">
//container div
.container{
width:300px;
position:relative;
}
//image css property
.imageHolder{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:10px;
}
// overlay css property
.imageOverlay{
position: absolute;
z-index:11px;
top:0px;
left:0px;
width:100%; height:100%;
text-align:center;
}
</style>
This is your html code will be
<div class="container">
<img src="myimage.png" class="imageHolder" />
<div class="imageOverlay"> Load </div>
</div>
Hope it helps... Thanks.
you'll have to do something like:
create a base div with css relative position
create your img tag with css absolute position, left:0px, top:0px, width:100%, height probably 50 and z-index probably 10.
create a top layer div with css position:absolute, z-index higher than that of the img, top:0px, left:0px, width: 100px and height probably 50.
The Code would look like
<div style="position:relative; width:50px;">
<img src="image.ext" border="0" style="position:absolute; left:0px; top:0px; width:50px; height:50px; z-index:10px;" />
<div style="position: absolute; z-index:11px; top:0px; left:0px; width:50px; height:50px; line-height:50px; text-align:center;"> Load </div>
</div>

How to fluid images when resize window?

How to fluid images when resize window?.
I have HTML code like this :
<div class="box">
<img src="http://demo.smooththemes.com/magazon/wp-content/uploads/2013/01/984632486_9d8ff89b63_b-642x336.jpg" />
</div>
And CSS :
.box {width:150px; height:60px; position:relative; overflow:hidden}
.box img{position:absolute; width:180px; height:80px; top:-10px; left:-10px}
When windows is resized, I want remove properties of (.box img): top:-10px; left:-10px and attribute more : min-width:100%, max-width:100%. It means we have :
.box img{
position:absolute;
width:180px; height:80px; min-width:100%;
top:(removed); left:(removed)}
How can I do it with Javascript or Jquery. Thanks for your help.
I tend to agree with #Phorden that media queries are a good route for this.
However, if you need to do it with JS / jQuery:
$(window).resize(function() {
$('.box img').css({'top': 'auto', 'left': 'auto', 'min-width': '100%'});
});
I don't know about a jQuery or Javascript solution, but if you want a pure CSS solution, CSS media Queries is probably what you want. It is a foundational concept of responsive web design. More info on CSS Media Queries here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
add max-width:100% and height:auto to your images to make them resize proportional based on their parent:
.box img{
position:absolute;
top:-10px;
left:-10px
max-width: 100%; /* fits width of parent */
height: auto; /* resize height based on max-width, making it proportional *?
}
.
I think this script by Scott Jehl could be interesting for you although the images only change there dimensions at specific breakpoints.
picturefill
It's very useful as you can define different picture sources for various resolutions.
The markup needed in combination with this script looks e.g. like this:
<span data-picture data-alt="Image description">
<span data-src="small.jpg"></span>
<span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="large.jpg" data-media="(min-width: 800px)"></span>
<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src="external/imgs/small.jpg" alt="Image description">
</noscript>
</span>

Css or javascript scroll transition?

I have two divs with:
width:100%; height:100%
so my whole document has an height of 200%;
both div`s have an link to each other,
now when i click on the link, i want that the site smoothly slides to the other div,
I know how this would work in jquery , for example with .scrollto, but my client wants an app wihout frameworks. Only javascricpt and css!
I tried to achive it with translateY, but it didnt worked!
Here is an exemplary code:
http://jsfiddle.net/hSU7R/
The HTML
<div class="full" id="one">
<span style="width:100%; background-color:blue">
<a href="#two" >Scroll to 2</a>
</span>
</div>
<div class="full" id="two">
<span style="width:100%; background-color:blue">
<a href="#one" >Scroll to 1</a></span>
</div>
The CSS
html,body {
width:100%;
height:100%;}
.full {
height:100%;
width:100%;}
#one {background-color:green}
#two {background-color:red}
Is this what you're looking for? A fork of your jsFiddle.
There has to be a smarter way to do this, but that's why we have jQuery right? My basic idea was to grab each anchor and turn off the default click response. Then, replace it with one that starts a setInterval chain. Each time the interval transpires, the window will incrementally scroll based on a frame rate and an estimated total run time. The actual run-time seems to take longer than the input time, but it at least gives you a way to get started.
What is the main disadvantage to using jQuery? I would think you'd get better performance from their implementation, since the jQuery people work on this stuff all the time.
You can control the scroll (speed, direction, position(?)) behavior with css.
CSS3 transitions enables to specify the way an element will go from a state to another while scroling is not an element. But you can position the body.
There is 'scroll-snap-points' wich might relate.
A CSS technique that allows customizable scrolling experiences like
pagination of carousels by setting defined snap points.
jsfiddled example
CSS
.gallery {
font-size: 0;
margin: auto;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-points-x: repeat(1000px);
scroll-snap-type: mandatory;
white-space: nowrap;
width: 1000px;
}
img {
width: 100%;
}
HTML
<div class="gallery">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/1.jpg">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/2.jpg">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/3.jpg">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/4.jpg">
</div>

Categories