I have a scrolling a gallery that looks like this, I need to add an option that on click on one of the pictures, the clicked picture will cover 100% height and width of the screen, and the scrollbar will still appear under the picture in order to move to the next or the previous pictures that also will be in size of 100% of the screen.
It should look like this.
This is the gallery that on the first example:
$('.imageWrapper img').click(function() {
$('.scrolls img').css({
'width': '100%',
'height': '100%'
});
$('.footerclass').css({
'display': 'none'
});
});
.wrapper {
margin: auto;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.scrolls img {
width: 275px;
cursor: pointer;
display:inline-block;
display:inline;
margin-right: -5px;
vertical-align:top;
}
.imageWrapper {
display: inline-block;
position: relative;
margin-bottom: 120px;
}
.imageWrapper img {
display: block;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper" id="column">
<div class="scrolls">
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<?php include 'footer.php';?>
</div>
</div>
</body>
I tried to add a JS that will change the size of all pictures to 100% height and width on click on one the picture. You could see that in the snippet.
My problem is how to display the specific picture that the user clicked on in 100% and still to have an option to scroll to previous or next pictures.
If you want to display the specific picture that the user clicked then I would suggest using $(this).css() selector instead of $(.scrolls img).css() to point more accurately to the image you're looking to render 100%.
Related
I need to make animation when I hover img tag to show text under him (must be animate showing text, slowly) but that is not all It must also move other content down when text show and to return when text is gone (when is not hover). Very Important showing text must be animate and going back.
I don't care if it works with jq or css or both just need work. I am a beginner so maybe it is obviously I just don't see it.
HTML:
<div class="first-block"></div>
<div class="secend-block">
<div class="box">
<img src="/Test/beach.jpg" alt="beach" width="200px" height="200px">
<p>asdasdasssssssssssssssssssssss
asdddddddddddddddddddddd
asdaaaadsssssssssssadsadsdasd
adsssssssssssssssssadsadsadsa
</p>
</div>
</div>
<div class="third-block">
<h1>some content</h1>
<h1>some content</h1>
<h1>some content</h1>
<h1>some content</h1>
</div>
CSS:
.first-block{
width: 99%;
height: 100px;
background: #f10000;
}
.secend-block{
width: 99%;
height: auto;
background: #ffffff;
}
.secend-block .box{
width: 200px;
padding-top: 10px;
margin: 0px auto;
}
.secend-block .box p{
display: none;
}
.third-block{
width: 99%;
height: auto;
background: #4400ff;
}
Use .class:hover
Basically, when .image is hovered, we want to change the styles of .text. The CSS query .image:hover + .text selects the .text the element where there is an image that is being hovered right before it.
.image {
width: 250px;
}
.text {
max-height: 0px;
overflow: hidden;
transition: max-height 1s;
}
.image:hover + .text {
max-height: 32px;
}
<div class="wrapper">
<img class="image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
<p class="text">This is some text</p>
</div>
<div class="wrapper">
<img class="image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
<p class="text">This is some text</p>
</div>
I am trying to use javascript to show a larger version of my image on mouseover. I have the functionality working however the display property is not right and I need the image to be shown ontop of the page content i.e like a popout.
How an I add this to my code. The problem I have is that my page is divided into columns so the image is restricted by the width of the column so I need a way to override that i.e. use a popout.
DEMO - js fiddle
html:
<div class="column1">
<div class="enlarge">
<img id="test" src="example.jpg" onmouseover="bigImg(this)" onmouseout="normalImg(this)" width="400" height="300" class="img-responsive" alt="image">
<div id="test1" class="test1" style="display:none;">
<img width="800" src="example.jpg" alt="" />
</div>
</div>
</div>
<div class="column2">
A LOT OF TEXT IN HERE
</div>
javascript:
function bigImg() {
$("#test1").show();
}
function normalImg() {
$("#test1").hide();
}
It would be restrictive to code your script using specific elements (IDs). Would advice you to use element classes instead.
You can achieve what you want several ways, here is one using absolute positioning for the big image:
$('.small-image').on('mouseenter', function(e) {
$(this).siblings('.big-image').show();
}).on('mouseleave', function(e) {
$(this).siblings('.big-image').hide();
})
body {
overflow-x: hidden;
}
.row::after {
content: ' ';
display: block;
clear: both;
}
.column {
float: left;
}
.column1 {
width: 20%;
}
.column2 {
width: 80%;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.enlarge {
position: relative;
}
.big-image {
display: none;
position: absolute;
left: 100%;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="column column1">
<div class="enlarge">
<img src="http://lorempixel.com/400/300/" class="small-image" alt="image">
<div class="big-image">
<img src="http://lorempixel.com/400/300/" alt="" />
</div>
</div>
</div>
<div class="column column2">
A LOT OF TEXT IN HERE
</div>
</div>
Also on Fiddle.
Try putting the img tag outside of the column1 div and then it will no longer be restricted.
If the img is not showing ontop of the text try add css value z-index.
img {
z-index:2;
}
use :
$("#test" ).hover(function() {
$("#test1").show();
},function(){
$("#test1").hide();
});
https://jsfiddle.net/2rt836co/4/
Could somebody please take a look at this livelink of my web page? I have a caption in the top right hand side of each of the divs in my layout div, however I have one horizontal box (the first one) where the caption extends to the bottom of the div instead of only having a height of 20px. I have been searching through this code but I can not see why.
Thanks in advance
HTML
<div class="col">
<div class="trigger vertical img1">
<div tabindex="0" class="maincontent">
<div class="slider static">
<div class="just_text">
<div class="caption-box">Caption</div>
<img src="slide1.png" height="400" width="200" />
</div>
<div class="just_text">
<div class="caption-box">Caption</div>
<img src="slide2.png" height="400" width="200" /></div>
<div class="just_text">
<div class="caption-box">Caption</div>
<img src="slide3.png" height="400" width="200" /></div>
<div class="just_text">
<div class="caption-box">Caption</div>
<img src="slide4.png" height="400" width="200" /></div>
</div>
</div>
</div>
</div>
CSS
.caption-box {
position: absolute;
right: 0;
height: 20px;
width:100px;
background-color: red;
color: #fff;
z-index: 999;
}
Add !important to your height, this will fix it...
.caption-box {
position: absolute;
right: 0;
height: 20px!important;
width:100px;
background-color: red;
color: #fff;
z-index: 999;
}
You've a
.trigger.vertical * {
height: 400px;
}
in your CSS, that force the heigh of the caption to 400px.
It happens only to the first caption because only the first caption is a child of a .trigger.vertical
Inspecting the element with Chrome shows that the height of 20px is overridden by this CSS class:
.trigger.vertical * {
height: 400px;
}
I noticed that there are quite a few differences in the layout between IE11 and Chrome 41.0.2272.118 so there are likely other issues with the layout.
creating a basic HTML page, should show a logo as the banner, with a hyperlink on the bottom right of the logo.
Then an iframe as the page.
Storing the image and the iframe inside 2 seperate divs, then put that inside a div.
Problem is when I try to add the time, it loads it below the image, and the iframe sits ontop of that blocking it out. Have tried Z Index and messing about with divs...any ideas?
<!DOCTYPE html>
<head>
<title>Interactive Map - Meath Field Names Project</title>
<style>
*{margin:0;padding:0}
html, body
{
height:100%;
width:100%;
overflow:hidden;
background-color:#E0DEDF;
}
iframe
{
height:100%;
width:100%
}
.content
{
width: 100%;
height:90%
}
.logoheader
{
width: 100%;
height: 10%;
}
.fullPage
{
height:100%;
width: 100%;
}
.hlink
{
z-index: 1;
color:#ACD0D4;
font-size:26px;
font-family:verdana
}
</style>
</head>
<body>
<div class="fullPage">
<div class="logoheader">
<img src="images/banner.png" alt="IMAGES" width="100%" />
<a class="hlink" href="http://www.google.com/">Help Page</a>
</div>
<div class="content">
<iframe class="wrapper"//linktoIFrame</iframe>
</div>
</div>
</body>
</html>
The following two solutions seem to work:
Negative margin-top with float right on the link
Adding a wrapper with position relative and absolutely positioning the link;
a.hlink {
position: relative;
margin-top: -1.5em;
float: right;
z-index: 5;
}
#wrapper {
position; relative;
}
#wrapper .otherlink{
position: absolute;
bottom: 3px;
right: 3px;
}
<img src="images/banner.png" alt="IMAGES" width="100%" height="75" />
<a class="hlink" href="http://www.google.com/">Help Page</a>
<p>more content</p><hr/>
<div id="wrapper" style="position:relative">
<img src="images/banner.png" alt="IMAGES" width="100%" height="75" />
<a class="hlink" href="http://www.google.com/">Help Page</a>
</div>
I am making a menu which has three parts to it:
Menu links left
Images
Menu links right
I need the menu links on the left and right to expand the full width of the screen and the image to be in a div with a fixed width and centered.
So I have the following setup
<div class="menuLinks">Some links</div>
<div class="menuImage"><img src="" alt="" /></div>
<div class="menuLinks">Some links</div>
And the css
.menuLinks{width:100%;float:left;}
.menuImage{width:400px;float:left;}
Any help with this is much appreciated.
Thanks
This is a solution which is Fully CSS and HTML.
CSS
#wrapper{
width:100%;
text-align:center;
overflow: auto;
}
#block-images{
background-color: silver;
width: 400px;
margin:0 auto;
position:absolute;
left: 50%;
margin-left: -200px;
}
.wrapper-menu-left{
float:left;
width:50%;
}
.wrapper-menu-right{
float:right;
width:50%;
}
.menuBlock{
text-align: left;
}
#mLeft{
background-color: green;
margin-right:200px;
}
#mRight{
background-color: navy;
margin-left:200px;
}
HTML
<div id="wrapper">
<div class="wrapper-menu-left">
<div class="menuBlock" id="mLeft">left</div>
</div>
<div class="wrapper-menu-right">
<div class="menuBlock" id="mRight">right</div>
</div>
<div id="block-images">images</div>
</div>
Here is your html menu :
<div class="menuLinks" name="links">Some links</div>
<div class="menuImage"><img src="" alt="" /></div>
<div class="menuLinks" name="links">Some links</div>
<div class="menuImage"><img src="" alt="" /></div>
<div class="menuLinks" name="links">Some links</div>
Just use css to size menuImages :
<style>
.menuImage{width:400px;float:left;}
</style>
Use javascript on load to find screen resolution and find each link div size :
<script language="javascript">
function resizeMenu()
{
var linksList = document.getElementsByName('links');
for(var i = 0; i < linksList.length; i++)
{
linksList[i].style.width = (screen.availWidth
- 2 * (400) //size of total images)
/ linksList.length; // total number of linksCount
}
}
resizeMenu();
</script>