I am complete newbie doing my first steps in front-end. I have spend most of my day on working out on some animation function but could not accomplish,below is the HTML, CSS and Javascript codes :
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Белточчо</title>
<link rel="stylesheet" href="main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<header>
<img class="logo" src="images/logo_green.jpg" alt="logo">
<div class="top-contacts">
<h1> Belltocco Company</h1>
<p> Paper production of all kinds in Kaliningrad</p>
<div class="details">
<img src="images/phone.png" alt="phone icon" width="25px"> <p>+7(4012)778080</p>
<img src="images/map_locator.png" alt="map icon" width="25px"> <p>25 Kant str. Kaliningrad</p>
<img src="images/mail.png" alt="mail icon" width="25px"> <p>info@beltocco.ru</p>
</div>
</div>
</header>
<section>
<div class="product">
<div class="viewport-first" id="viewport1">
<a href="#">
<span class="dark-background">Toilet paper<br><em>min order: 5000 each<br>quality: iso 9001<br>Lorem Ipsum: 5000<br>Lorem Ipsum: 1000</em></span>
<img src="images/discharger.jpg" alt="discharger">
</a>
</div>
<div class="viewport" id="viewport2">
<a href="#">
<span class="dark-background">Toilet paper<br><em>min order: 5000 each<br>quality: iso 9001<br>Lorem Ipsum: 5000<br>Lorem Ipsum: 1000</em></span>
<img src="images/napkin-table.jpg" alt="napkin-table">
</a>
</div>
<div class="viewport" id="viewport3">
<a href="#">
<span class="dark-background">Toilet paper<br><em>min order: 5000 each<br>quality: iso 9001<br>Lorem Ipsum: 5000<br>Lorem Ipsum: 1000</em></span>
<img src="images/napkin.jpg" alt="napkin">
</a>
</div>
<div class="viewport" id="viewport4">
<a href="#">
<span class="dark-background">Toilet paper<br><em>min order: 5000 each<br>quality: iso 9001<br>Lorem Ipsum: 5000<br>Lorem Ipsum: 1000</em></span>
<img src="images/toilet_paper.jpg" alt="toilet">
</a>
</div>
<div class="clear"></div>
<script>
var clicked = true;
$(document).ready(function() {
$('.viewport').mouseenter(function(e) {
if (clicked) {
$(this).children('a').children('img').animate({ height: '250', left: '0', top: '0', width: '200'}, 100);
$(this).children('a').children('span').fadeIn(200);
}
}).mouseleave(function(e) {
if (clicked) {
$(this).children('a').children('img').animate({ height: '250', left: '0', top: '0', width: '200'}, 100);
$(this).children('a').children('span').fadeOut(20);
}
});
});
$(document).ready(function() {
$('.viewport-first').mouseenter(function(e) {
if (clicked) {
$(this).children('a').children('img').animate({ height: '250', left: '0', top: '0', width: '200'}, 100);
$(this).children('a').children('span').fadeIn(200);
}
}).mouseleave(function(e) {
if (clicked) {
$(this).children('a').children('img').animate({ height: '250', left: '0', top: '0', width: '200'}, 100);
$(this).children('a').children('span').fadeOut(50);
}
});
});
function animate(a)
{
clicked = false;
$('#viewport1').animate({height: '125', left: '0', top: '0', width: '100'}, 100);
$('#viewport2').animate({height: '125', left: '0', top: '0', width: '100'}, 100);
$('#viewport3').animate({height: '125', left: '-230', top: '135', width: '100'}, 100);
$('#viewport4').animate({height: '125', left: '-230', top: '135', width: '100'}, 100);
$('#viewport1').children('a').children('img').animate({height: '125', left: '0', top: '0', width: '100'}, 100);
$('#viewport1').children('a').children('span').fadeOut(50);
$('#viewport2').children('a').children('img').animate({height: '125', left: '0', top: '0', width: '100'}, 100);
$('#viewport2').children('a').children('span').fadeOut(50);
$('#viewport3').children('a').children('img').animate({height: '125', left: '0', top: '0', width: '100'}, 100);
$('#viewport3').children('a').children('span').fadeOut(50);
$('#viewport4').children('a').children('img').animate({height: '125', left: '0', top: '0', width: '100'}, 100);
$('#viewport4').children('a').children('span').fadeOut(50);
}
$(document).ready(function() {
$('#viewport1').click(function() {animate(1)});
$('#viewport2').click(function() {animate(2)});
$('#viewport3').click(function() {animate(3)});
$('#viewport4').click(function() {animate(4)});
});
</script>
</div>
</section>
/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
header {
background:#FFF;
top: 0;
width:1280px;
padding:0px;
height: 220px;
margin-left:0;
}
.logo {
margin-left:200px;
margin-top:50px;
margin-bottom:50px;
width:150px;
float:left;
}
.top-contacts {
float:left;
padding:75px 20px;
color:#000;
}
.top-contacts h1 {
font-size:16px;
color:#8ac23f;
font-weight:normal;
font-style:normal;
font-family:" Aktiv Grotesk Std ", Helvetica, Arial, sans-serif;
}
.top-contacts p {
font-size:12px;
font-weight:normal;
font-style:normal;
font-family:" Aktiv Grotesk Std ", Helvetica, Arial, sans-serif;
padding-top:5px;
}
.details img {
float:left;
}
.details p {
float:left;
padding-top:8px;
padding-left:5px;
padding-right:8px;
}
/* --- Container configuration HOVER OVER IMAGE ---------------------------------------------------------- */
.viewport-first {
border: 3px solid #eee;
float: left;
margin: 50px 9px 9px 220px;
overflow: hidden;
position: relative;
width: 200px;
height: 250px;
border-radius:8px;
}
/* --- Link configuration that contains the image and label ----------------------------- */
.viewport-first a {
display: block;
position: relative;
}
.viewport-first a img {
/*height: 332px;*/
/*left: -20px;*/
position: relative;
/*top: -20px;*/
/*width: 500px;*/
width: 200px;
height: 250px;
}
/* --- Label configuration -------------------------------------------------------------- */
.viewport-first a span {
display: none;
font-size: 2.0em;
font-weight: bold;
height: 100%;
padding-top: 120px;
position: absolute;
text-align: center;
text-decoration: none;
width: 100%;
z-index: 100;
}
.viewport-first a span em {
display: block;
font-size: 0.5em;
font-weight: normal;
color:#000;
}
.viewport {
border: 3px solid #eee;
float: left;
margin: 50px 9px 9px 0;
overflow: hidden;
position: relative;
width: 200px;
height: 250px;
border-radius:8px;
}
/* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
class to the last thumbnail in each row to get rid of the margin-right. */
.no-margin {
margin-right: 0;
}
/* --- Link configuration that contains the image and label ----------------------------- */
.viewport a {
display: block;
position: relative;
}
.viewport a img {
/*height: 332px;*/
/*left: -20px;*/
position: relative;
/*top: -20px;*/
/*width: 500px;*/
width: 200px;
height: 250px;
}
/* --- Label configuration -------------------------------------------------------------- */
.viewport a span {
display: none;
font-size: 2.0em;
font-weight: bold;
height: 100%;
padding-top: 120px;
position: absolute;
text-align: center;
text-decoration: none;
width: 100%;
z-index: 100;
}
.viewport a span em {
display: block;
font-size: 0.5em;
font-weight: normal;
color:#000;
}
/* --- Dark hover background ------------------------------------------------------------ */
.dark-background {
background-color: rgba(240, 240, 240, 0.97);
color: #000;
/*text-shadow: #111 0px 0px 20px;*/
}
.dark-background em {
color: #000;
}
/**
* You could create multiple hover background classes for different looks depending on the
* image type. Use your imagination!
*/
.product {
/*background:#EDCAA6;*/
background-image:url(images/paper_texture_picture_169367.jpg);
height:380px;
}
/*
.product img {
margin-top:50px;
width: 200px;
height: 200px;
border-radius: 8px;
margin-right: 5px;
}
.product img:first-child {
margin-left:250px;
}
.clear {
clear:both;
}
/*-----CLEARFIX-----*/
.group:before,.group:after {
content: "";
display: table;}.group:after {
clear: both;}.group {
clear: both;
*zoom: 1;}
/*-------------------------------------*/
What i have been able to achieve during the hover on the image the text appears , and when you click on the image all four images become small and grouped in the left , like in the images below.
https://www.dropbox.com/s/xnuve3jl8woxqkn/1.png?dl=0
https://www.dropbox.com/s/78tm69qhwy3p8d6/2.png?dl=0
What I cannot create ,is the following after click event when the 4 images become smaller and grouped in the left ,on the right I want rectangular box equal to the size of the 3 images in the right in which I will provide additional information on the product type clicked. Besides that the 4 small images on the left should response to the click and after each click should provide appropriate information on the correct product on the right.
Add a hidden div
<div id="hidden_div" class="hidden_div"></div>
with a style
.hidden_div{display:none;}
Use $("#hidden_div").show();
, $("#hidden_div").hide();
to show/hide the div. Use $("#hidden_div").html(desired_content);
to change its content on clicking image divs
With the layout you've got now, I see that the 4 smaller images stacked left are positioned with a fixed left margin. You can just add a (previously hidden) absolutely positioned div for your info panel; be sure to add position relative to your div.product:
<div class="product" style="position: relative;"> <div class="infoPanel" style=" width: 560px; height: 220px;position: absolute; top: 54px; left: 470px; background: #fafafa; padding: 20px; -webkit-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.17); -moz-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.17); box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.17); border-radius: 3px; "> <p>This is the infoPanel</p> </div> <!-- the rest of your html --> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.