Skip to content

N
NAP-wordpress
Commit b5c95c7f authored by imac's avatar imac
Browse files
Options

[Bugfix]Add scroll to gallery && responsive slider

parent 94728130
Hide whitespace changes
Inline Side-by-side
Showing with 122 additions and 54 deletions
wp-content/themes/nap/assets/css/main.css
View file @ b5c95c7f
......@@ -870,12 +870,10 @@ aside.news-wrapper {
opacity: 0;
}
.product-slides{
width: 71.5%;
width: 80%;
margin: 0 auto;
display: block;
position: relative;
max-width: 555px;
margin-left: 20.6%;
padding-left: 60px;
}
.product-header{
color: #182566;
......@@ -893,12 +891,20 @@ aside.news-wrapper {
#slides{
/* width: 80%;*/
width: 500px;
height: 100%;
margin: 0 auto;
}
#slides .image > img{
max-width: 100%;
max-height: 416px;
margin: 0 auto;
}
.element-slider{
height: 500px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#slides .element-slider:last-child .image{
margin-bottom: 0px;
}
......@@ -911,10 +917,14 @@ aside.news-wrapper {
background: #fff;
opacity: 0;
visibility: hidden;
overflow: auto;
height: 100%;
}
.slides-wrapper .gallery-content{
margin-right: 54px;
position: relative;
max-width: 500px;
margin: 0 auto;
}
.slides-wrapper .gallery article{
position: relative;
......@@ -950,9 +960,10 @@ aside.news-wrapper {
}
.nav-slider ul {
position: absolute;
left: 95.5%;
left: 100%;
z-index: 999;
display: table;
margin-left: 25px;
}
.nav-slider ul li{
background: #182566;
......
wp-content/themes/nap/assets/css/responsive.css
View file @ b5c95c7f
/* ------------------------*/ /* ---------->>> 1280 <<<-----------*/ /* ------------------------*/
@media screen and (max-width: 1280px) {
#slides{
width: 416px;
}
.element-slider{
height: 416px;
}
.product-slides{
padding-left: 5%;
}
}
/* ------------------------*/ /* ---------->>> 1200 <<<-----------*/ /* ------------------------*/
@media screen and (max-width: 1200px) {
/*FONTS*/
.product-info .info-content h3,
.product-info .info-content h2{
letter-spacing: 1px;
}
/*BTN*/
.circle-btn{
height: 80px;
width: 80px;
}
/*Product*/
#slides{
width: 400px;
}
.element-slider{
height: 400px;
}
.slides-wrapper .gallery-content{
max-width: 400px;
}
.slick-prev {
left: -35px;
}
.slick-next {
right: -35px;
}
.product-details form {
width: 35%;
}
.product-details .list {
padding: 20px 7px;
}
.pa_format ul li{
margin-bottom: 10px;
}
.color-list input[type='radio']:after{
height: 30px;
width: 30px;
}
.pa_couleur li {
margin-bottom: 10px;
}
.pa_couleur li.selected >input:first-child::before,
.list li.selected >span:first-child::after {
height: 14px;
width: 18px;
background-size: 17px;
}
.product-info {
width: 65%;
}
}
/* ------------------------*/ /* ---------->>> 1024 <<<-----------*/ /* ------------------------*/
......
wp-content/themes/nap/assets/js/main.js
View file @ b5c95c7f
......@@ -285,7 +285,6 @@ $.fn.getMenuBg = function(){
galleryWidth = windowWidth - navPhototequeWidth,
filterWidth = $('.right-container .left-panel').outerWidth(),
footerContact = $('.contact-form .footer').outerHeight();
$('.gallery-wrapper').outerWidth(galleryWidth).css('margin-left',navPhototequeWidth) ;
$('.main,.load-page').outerHeight(containerHeight);
$('.full-height').outerHeight(maxHeight);
......@@ -372,7 +371,7 @@ function onScroll(event){
var currLink = $(this);
var refElement = $(currLink.attr("href"));
//console.log(currLink);
if (refElement.position().top - 20 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
if (refElement.length && refElement.position().top - 20 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.subcat a').removeClass("active");
currLink.addClass("active");
if ($('nav ul ul').find('li.active')){
......
wp-content/themes/nap/assets/js/map.js
View file @ b5c95c7f
......@@ -6,7 +6,6 @@ zone5: ['01' , '04' , '05' , '07' , '10' , '21' , '25' , '26' , '38' , '39' , '4
zone6: ['06' , '09' , '11' , '13' , '20' , '30' , '34' , '48' , '66' , '81' , '83' , '84' , '2A' , '2B' , 'ES']}
*/
var zones = jQuery.parseJSON(zonesL.listZones);
console.log(zones);
function initMap(){
setTimeout(function(){
if(jQuery(document).find('#map').length){
......
wp-content/themes/nap/assets/js/product.js
View file @ b5c95c7f
......@@ -86,7 +86,7 @@ $(function(){
$.fn.open_gallery = function(){
$(this).on('click',function(){
tl = new TimelineMax()
tl.staggerFromTo('.slides-wrapper .gallery article',0.5,{opacity:0,y:100},{opacity:1,y:0},0.1,0);
tl.staggerFromTo('.slides-wrapper .gallery article',0.3,{opacity:0,y:100},{opacity:1,y:0},0.1,0);
tl.fromTo('.gallery',0.5,{opacity:0,visibility:"hidden"},{opacity:1,visibility:"visible"},0);
tl.fromTo('#slides',0.5,{opacity:1},{opacity:0},0);
tl.fromTo('.nav-slider',0.5,{opacity:1},{opacity:0},0);
......@@ -132,7 +132,6 @@ $(function(){
sizeProductDetails = $('.product-details .list').length;
if (sizeProductDetails < 2) {
$('.product-info').outerWidth('78.3%');
console.log(sizeProductDetails);
}
$('.pa_couleur li').getListColors();
$('.pa_couleur li').selectColor();
......@@ -152,7 +151,7 @@ $(function(){
$('.pa_couleur li').selectColor();
$('.pa_format li').selectFormat();
$('.color-list.selected').selectSlide($('#slides'));
},900)
},500)
$('.download-btn:not(.download_file)').click(function(e){
e.stopPropagation();
});
......
wp-content/themes/nap/header.php
View file @ b5c95c7f
......@@ -2,7 +2,6 @@
<html <?php language_attributes(); ?> class="no-js no-svg">
<link href="<?php echo home_url('wp-content/themes/nap/assets/css/normalize.css') ?>" rel="stylesheet" type="text/css">
<link href="<?php echo home_url('wp-content/themes/nap/assets/css/responsive.css') ?>?v=432" rel="stylesheet" type="text/css">
<link href="<?php echo home_url('wp-content/themes/nap/assets/fonts/stylesheet.css') ?>" rel="stylesheet" type="text/css">
<link href="<?php echo home_url('wp-content/themes/nap/assets/css/slick-theme.css') ?>?v=432" rel="stylesheet" type="text/css">
<link href="<?php echo home_url('wp-content/themes/nap/assets/css/slick.css') ?>?v=432" rel="stylesheet" type="text/css">
......@@ -10,6 +9,7 @@
<link href="<?php echo home_url('wp-content/themes/nap/assets/css/animate.css') ?>" rel="stylesheet" type="text/css">
<link href="<?php echo home_url('wp-content/themes/nap/assets/css/animsition.min.css') ?>" rel="stylesheet" type="text/css">
<link href="<?php echo home_url('wp-content/themes/nap/assets/css/main.css') ?>?v=454" rel="stylesheet" type="text/css">
<link href="<?php echo home_url('wp-content/themes/nap/assets/css/responsive.css') ?>?v=432" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
......
wp-content/themes/nap/woocommerce/single-product/add-to-cart/variable.php
View file @ b5c95c7f
......@@ -69,59 +69,61 @@ do_action('woocommerce_before_add_to_cart_form');
<div id="product" class="clearfix">
<div class="product-images row animated">
<div class = "btn-wrapper abs close-panel">
<div class = "btn-wrapper row close-panel">
<div class="pink-btn circle-btn"><a href="#"><span class = "abs-center backlink">Retour</span></a></div>
</div>
<div class="product-slides">
<div class="product-slides row">
<div class="product-header">
<h2 class="crete -italic font-small"><?php echo $product_cats[1]->name ?></h2>
<h3 class="crete"><?php the_title(); ?></h3>
</div>
<div class="nav-slider transition">
<ul>
<li id = "mozaique"><span class="icon mozaique row"></span><span class="desc">Mozaïque</span></li>
<li id = "zoom" data-active="false" ><span class="icon zoom"></span><span class="desc">Zoom</span></li>
<li><span class="icon download"></span><span class="desc">Télécharger</span></li>
</ul>
</div>
<div class="slides-wrapper">
<div id="slides">
<?php
$variations = $product->get_available_variations();
$var_colors = nap_distinct_color_variations($variations);
foreach ($var_colors as $key => $value) :
?>
<div class="image element-slider easyzoom easyzoom--overlay easyzoom--with-toggle" data-color = "<?php echo $value ?>" data-slick-index = "1">
<a href="<?php echo get_the_post_thumbnail_url($key, 'full') ?>">
<img src="<?php echo get_the_post_thumbnail_url($key, 'medium') ?>" alt="" />
</a>
</div>
<div class="slides-wrapper center">
<div class="row">
<div class="nav-slider transition">
<ul>
<li id = "mozaique"><span class="icon mozaique row"></span><span class="desc">Mozaïque</span></li>
<li id = "zoom" data-active="false" ><span class="icon zoom"></span><span class="desc">Zoom</span></li>
<li><span class="icon download"></span><span class="desc">Télécharger</span></li>
</ul>
</div>
<div id="slides">
<?php
endforeach;
?>
<?php
if (get_field('images_ambiance', 'product_cat_' . $subcat_iD)):
$ambiance = array();
while (has_sub_field('images_ambiance', 'product_cat_' . $subcat_iD)) :
$image_amb = get_sub_field('img_ab');
$ambiance [] = $image_amb;
$attachment = wp_get_attachment_image_src($image_amb, 'medium');
$hd = wp_get_attachment_image_src($image_amb, 'full');
$variations = $product->get_available_variations();
$var_colors = nap_distinct_color_variations($variations);
foreach ($var_colors as $key => $value) :
?>
<div class="image element-slider easyzoom easyzoom--overlay easyzoom--with-toggle" data-color = "<?php echo $color ?>" data-slick-index = "1">
<a href="<?php echo $hd[0]; ?>">
<img src="<?php echo $attachment[0]; ?>" alt="" />
<div style="background-image:url('<?php echo get_the_post_thumbnail_url($key, 'medium') ?>')" class="image element-slider easyzoom easyzoom--overlay easyzoom--with-toggle" data-color = "<?php echo $value ?>" data-slick-index = "1">
<a href="<?php echo get_the_post_thumbnail_url($key, 'full') ?>">
<!--<img src="<?php echo get_the_post_thumbnail_url($key, 'medium') ?>" alt="" />-->
</a>
</div>
<?php
endwhile;
endif;
?>
endforeach;
?>
<?php
if (get_field('images_ambiance', 'product_cat_' . $subcat_iD)):
$ambiance = array();
while (has_sub_field('images_ambiance', 'product_cat_' . $subcat_iD)) :
$image_amb = get_sub_field('img_ab');
$ambiance [] = $image_amb;
$attachment = wp_get_attachment_image_src($image_amb, 'medium');
$hd = wp_get_attachment_image_src($image_amb, 'full');
?>
<div style="background-image:url('<?php echo $attachment[0]; ?>')" class="image element-slider easyzoom easyzoom--overlay easyzoom--with-toggle" data-color = "<?php echo $color ?>" data-slick-index = "1">
<a href="<?php echo $hd[0]; ?>">
<!--<img src="<?php echo $attachment[0]; ?>" alt="" />-->
</a>
</div>
</div>
<?php
endwhile;
endif;
?>
</div>
</div>
<div class="gallery clearfix">
<div class="gallery-content clearfix">
<span class="close-btn"></span>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment