0

Product Details SlideUp Gallery Based Tutorial

Follow my steps how to make this beautifull slide up Animation Product Details gallery page.I hope this Tutorial help to e-commerce web developers. Any product  Gallery  based web sites.

Slidup-product-details

Step1
HTML Marckup :
<div class="coupongallerywrap">
<div class="coupontopwrap">
<div class="couponlogo">
<img src="images/couponlogo.png" alt="Abcoutlets.com" border="0" />
</div>
<div class="couponheadtext">
<h2> BOOK ONLINE AND GET DISCOUNT UPTO RS 5 LACS PLUS OTHER EXCITING OFFERS </h2>
</div>

</div>
<div class="clear"></div>
<div class="couponslidewrap">
<div class="couponslidesone">
<div class="couponslideone">
<div class="couponradial">
1.
</div>
<div class="couponslideimageone" id="div1image" style="display: block;" onclick="display(this);">
<img src="images/coupongalleryone.png" alt="Abcoutlets.com" border="0" style="height: 150px;" />
</div>
<div class="couponslidecontent" id="div1matter" style="display: none;" onclick="display(this);">
<div class="couponimagetitle">
Lenovo Yoga Tablet 10

</div>
<div class="coupondiscription">
CASH Extra 1% cash back on all Prepaid orders! Min purchase 500
</div>
</div>
</div>
<div class="couponslideone">
<div class="couponradial">
2.
</div>
<div class="couponslideimageone" id="div2image" style="display: block;" onclick="display(this);">
<img src="images/coupongalleryone-two.png" alt="Abcoutlets.com" border="0" style="height: 150px;" />
</div>
<div class="couponslidecontent" style="display: none;" id="div2matter" onclick="display(this);">
<div class="couponimagetitle">
Nikon D3200 DSLR Camera
</div>
<div class="coupondiscription">
Black, Body with AF-S DX NIKKOR 18-55mm f/3.5-5.6G VR II Lens
</div>
</div>
</div>
<div class="couponslideone">
<div class="couponradial">
3.
</div>
<div class="couponslideimageone" id="div3image" style="display: block;" onclick="display(this);">
<img src="images/coupongalleryone03.png" alt="Abcoutlets.com" border="0" style="height: 150px;" />
</div>
<div class="couponslidecontent" style="display: none;" id="div3matter" onclick="display(this);">
<div class="couponimagetitle">
HP - Multi-function Inkjet Printer
</div>
<div class="coupondiscription">
HP - 4645 Multi-function Inkjet Printer (Black) 15% off
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="couponslidesonetwo">
<div class="couponslideone">
<div class="couponradial">
4.
</div>
<div class="couponslideimageone" style="display: block;" id="div4image" onclick="display(this);">
<img src="images/coupongalleryone04.png" alt="Abcoutlets.com" border="0" style="height: 150px;" />
</div>
<div class="couponslidecontent" style="display: none;" id="div4matter" onclick="display(this);">
<div class="couponimagetitle">
Tupperware Classic 3 Combo Pack
</div>
<div class="coupondiscription">

Tupperware Classic 2 Containers Lunch Box(500ml)  25% off
</div>
</div>
</div>
<div class="couponslideone">
<div class="couponradial">
5.
</div>
<div class="couponslideimageone" style="display: block;" id="div5image" onclick="display(this);">
<img src="images/coupongalleryone05.png" alt="Abcoutlets.com" border="0" style="height: 150px;" />
</div>
<div class="couponslidecontent" style="display: none;" id="div5matter" onclick="display(this);">
<div class="couponimagetitle">
Pigeon Glass Steel Manual Gas Stove
</div>
<div class="coupondiscription">
Pigeon Glass, Stainless Steel Manual Gas Stove 3 Burners 10% off
</div>
</div>
</div>
<div class="couponslideone">
<div class="couponradial">
6.
</div>
<div class="couponslideimageone" style="display: block;" id="div6image" onclick="display(this);">
<img src="images/coupongalleryone06.png" alt="Abcoutlets.com" border="0" style="height: 150px;" />
</div>
<div class="couponslidecontent" style="display: none;" id="div6matter" onclick="display(this);">
<div class="couponimagetitle">
LG G3 D855
</div>
<div class="coupondiscription">
LG G3 Titan, with 32 GB 8% off
</div>
</div>
</div>
</div>

<div class="clear"></div>
</div>
<div class="couponbtmbuttons">
<div class="nothanksbtn">
<a href="">Back</a>
</div>
<div class="paynow">
<a href="">Next</a>
</div>
</div>
</div>

Step2
CSS :
body {
     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     margin: 0px;
     padding: 0px;
     min-height: 100%;
}
.coupongallerywrap {
     width: 1150px;
     margin: 0px auto;
     padding: 0px;
}
.coupontopwrap {
     width: 1090px;
     margin: 40px auto 0px auto;
     padding: 0px;
}
.couponlogo {
     width: 152px;
     height: 68px;
     margin: 0px;
     padding: 0px;
     float: left;
     border: solid 1px #ccc;
}
.couponheadtext {
     width: 500px;
     float: left;
     margin: 0px 0px 0px 20px;
     padding: 0px;
}
.couponheadtext h2 {
     width: 550px;
     float: left;
     margin: 0px;
     padding: 0px;
     color: #838385;
     font-size: 20px;
}
.couponskip {
     width: 100px;
     margin: 60px 0px 0px 0px;
     padding: 0px;
     float: right;
}
.couponskip h2 {
     width: 100px;
     margin: 0px;
     padding: 0px;
     color: #ED1C24;
     font-size: 20px;
}
.couponslidewrap {
     width: 1150;
     margin: 0px auto;
     padding: 0px;
}
.couponslidesone {
     width: 1150px;
     margin: 30px 0px 0px 0px;
     padding: 0px;
     height: 180px;
}
.couponslidesonethree {
     width: 1150px;
     margin: 30px 0px 0px 0px;
     padding: 0px;
     height: 180px;
}
.couponslidesonetwo {
     width: 1150px;
     margin: 30px 0px 0px 0px;
     padding: 0px;
     height: 180px;
}
.couponslideone {
     width: 382px;
     margin: 0px;
     padding: 0px;
     float: left;
}
.couponradial {
     width: 30px;
     height: 150px;
     margin: 0px;
     padding: 0px;
     float: left;
     text-align: center;
}
.couponslideimageone {
     margin: 0px;
     padding: 0px;
     float: left;
     width: 350px;
     height: 150px;
     border: solid 1px #ccc;
     cursor: pointer;
}
.couponslidecontent {
     margin: 0px;
     padding: 0px;
     float: left;
     width: 350px;
     height: 150px;
     border: solid 1px #ccc;
     cursor: pointer;
}
.couponimagetitle {
     width: 350px;
     height: 50px;
     text-align: center;
     vertical-align: middle;
     line-height: 50px;
     font-size: 18px;
     color: #22B14C;
     margin: 0px;
     padding: 0px;
     font-weight: bold;
}
.coupondiscription {
     width: 340px;
     height: 100px;
     text-align: center;
     font-size: 14px;
     color: #666;
     margin: 0px;
     padding: 0px 5px;
}
.clear {
     clear: both;
}

.couponbtmbuttons {
     width: 415px;
     float: right;
     margin: 30px 0px 0px 0px;
     padding: 0px;
}
.nothanksbtn {
     width: 160px;
     margin: 0px;
     padding: 3px 20px;
     background-color: #000;
     text-align: center;
     float: left;
}
.nothanksbtn a {
     font-family: Arial;
     font-size: 16px;
     text-decoration: none;
     color: #fff;
     font-weight: bold;
}
.paynow {
     width: 160px;
     margin: 0px 0px 0px 10px;
     padding: 3px 20px;
     background-color: #7F7F7F;
     text-align: center;
     float: left;
}
.paynow a {
     font-family: Arial;
     font-size: 16px;
     text-decoration: none;
     color: #fff;
     font-weight: bold;
}

Step3
JavaScript :
function display(idvalue) {
     if (idvalue.id == "div1image") {
$("#div1image").slideUp();
$("#div1matter").slideDown();
$("#div2matter").slideUp();
$("#div2image").slideDown();
$("#div3matter").slideUp();
$("#div3image").slideDown();
$("#div4matter").slideUp();
$("#div4image").slideDown();
$("#div5matter").slideUp();
$("#div5image").slideDown();
$("#div6matter").slideUp();
$("#div6image").slideDown();
$("#div7matter").slideUp();
$("#div7image").slideDown();
$("#div8matter").slideUp();
$("#div8image").slideDown();
$("#div9matter").slideUp();
$("#div9image").slideDown();

} else if (idvalue.id == "div2image") {
$("#div2image").slideUp();
$("#div2matter").slideDown();
$("#div1matter").slideUp();
$("#div1image").slideDown();
$("#div3matter").slideUp();
$("#div3image").slideDown();
$("#div4matter").slideUp();
$("#div4image").slideDown();
$("#div5matter").slideUp();
$("#div5image").slideDown();
$("#div6matter").slideUp();
$("#div6image").slideDown();
$("#div7matter").slideUp();
$("#div7image").slideDown();
$("#div8matter").slideUp();
$("#div8image").slideDown();
$("#div9matter").slideUp();
$("#div9image").slideDown();

} else if (idvalue.id == "div3image") {
$("#div3image").slideUp();
$("#div3matter").slideDown();
$("#div1matter").slideUp();
$("#div1image").slideDown();
$("#div2matter").slideUp();
$("#div2image").slideDown();
$("#div4matter").slideUp();
$("#div4image").slideDown();
$("#div5matter").slideUp();
$("#div5image").slideDown();
$("#div6matter").slideUp();
$("#div6image").slideDown();
$("#div7matter").slideUp();
$("#div7image").slideDown();
$("#div8matter").slideUp();
$("#div8image").slideDown();
$("#div9matter").slideUp();
$("#div9image").slideDown();

} else if (idvalue.id == "div4image") {
$("#div4image").slideUp();
$("#div4matter").slideDown();
$("#div1matter").slideUp();
$("#div1image").slideDown();
$("#div2matter").slideUp();
$("#div2image").slideDown();
$("#div3matter").slideUp();
$("#div3image").slideDown();
$("#div5matter").slideUp();
$("#div5image").slideDown();
$("#div6matter").slideUp();
$("#div6image").slideDown();
$("#div7matter").slideUp();
$("#div7image").slideDown();
$("#div8matter").slideUp();
$("#div8img").slideDown();
$("#div9matter").slideUp();
$("#div9image").slideDown();

} else if (idvalue.id == "div5image") {
$("#div5image").slideUp();
$("#div5matter").slideDown();
$("#div1matter").slideUp();
$("#div1image").slideDown();
$("#div2matter").slideUp();
$("#div2image").slideDown();
$("#div3matter").slideUp();
$("#div3image").slideDown();
$("#div4matter").slideUp();
$("#div4image").slideDown();
$("#div6matter").slideUp();
$("#div6image").slideDown();
$("#div7matter").slideUp();
$("#div7image").slideDown();
$("#div8matter").slideUp();
$("#div8image").slideDown();
$("#div9matter").slideUp();
$("#div9image").slideDown();

} else if (idvalue.id == "div6image") {
$("#div6image").slideUp();
$("#div6matter").slideDown();
$("#div1matter").slideUp();
$("#div1image").slideDown();
$("#div2matter").slideUp();
$("#div2image").slideDown();
$("#div3matter").slideUp();
$("#div3image").slideDown();
$("#div4matter").slideUp();
$("#div4image").slideDown();
$("#div5matter").slideUp();
$("#div5image").slideDown();
$("#div7matter").slideUp();
$("#div7image").slideDown();
$("#div8matter").slideUp();
$("#div8image").slideDown();
$("#div9matter").slideUp();
$("#div9image").slideDown();

} else if (idvalue.id == "div7image") {
$("#div7matter").slideDown();
$("#div7image").slideUp();
$("#div6image").slideDown();
$("#div6matter").slideUp();
$("#div1matter").slideUp();
$("#div1image").slideDown();
$("#div2matter").slideUp();
$("#div2image").slideDown();
$("#div3matter").slideUp();
$("#div3image").slideDown();
$("#div4matter").slideUp();
$("#div4image").slideDown();
$("#div5matter").slideUp();
$("#div5image").slideDown();
$("#div8matter").slideUp();
$("#div8image").slideDown();
$("#div9matter").slideUp();
$("#div9image").slideDown();

} else if (idvalue.id == "div8image") {
$("#div8matter").slideDown();
$("#div8image").slideUp();
$("#div7matter").slideUp();
$("#div7image").slideDown();
$("#div6image").slideDown();
$("#div6matter").slideUp();
$("#div1matter").slideUp();
$("#div1image").slideDown();
$("#div2matter").slideUp();
$("#div2image").slideDown();
$("#div3matter").slideUp();
$("#div3image").slideDown();
$("#div4matter").slideUp();
$("#div4image").slideDown();
$("#div5matter").slideUp();
$("#div5image").slideDown();
$("#div9matter").slideUp();
$("#div9image").slideDown();

} else if (idvalue.id == "div9image") {
$("#div9matter").slideDown();
$("#div9image").slideUp();
$("#div8matter").slideUp();
$("#div8image").slideDown();
$("#div7matter").slideUp();
$("#div7image").slideDown();
$("#div6image").slideDown();
$("#div6matter").slideUp();
$("#div1matter").slideUp();
$("#div1image").slideDown();
$("#div2matter").slideUp();
$("#div2image").slideDown();
$("#div3matter").slideUp();
$("#div3image").slideDown();
$("#div4matter").slideUp();
$("#div4image").slideDown();
$("#div5matter").slideUp();
$("#div5image").slideDown();

     }

}

Demo Download

Unknown

nowstartwebdesign.com tutorial has been prepared for the beginners to help them understand basic HTML programming. After completing this tutorial you will find yourself at a moderate level of expertise Web Designing from where you can take yourself to next levels

No comments :

Post a Comment