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 { ...@@ -870,12 +870,10 @@ aside.news-wrapper {
opacity: 0; opacity: 0;
} }
.product-slides{ .product-slides{
width: 71.5%; width: 80%;
margin: 0 auto; margin: 0 auto;
display: block;
position: relative; position: relative;
max-width: 555px; padding-left: 60px;
margin-left: 20.6%;
} }
.product-header{ .product-header{
color: #182566; color: #182566;
...@@ -893,12 +891,20 @@ aside.news-wrapper { ...@@ -893,12 +891,20 @@ aside.news-wrapper {
#slides{ #slides{
/* width: 80%;*/ /* width: 80%;*/
width: 500px; width: 500px;
height: 100%;
margin: 0 auto;
} }
#slides .image > img{ #slides .image > img{
max-width: 100%; max-width: 100%;
max-height: 416px; max-height: 416px;
margin: 0 auto; margin: 0 auto;
} }
.element-slider{
height: 500px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#slides .element-slider:last-child .image{ #slides .element-slider:last-child .image{
margin-bottom: 0px; margin-bottom: 0px;
} }
...@@ -911,10 +917,14 @@ aside.news-wrapper { ...@@ -911,10 +917,14 @@ aside.news-wrapper {
background: #fff; background: #fff;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
overflow: auto;
height: 100%;
} }
.slides-wrapper .gallery-content{ .slides-wrapper .gallery-content{
margin-right: 54px; margin-right: 54px;
position: relative; position: relative;
max-width: 500px;
margin: 0 auto;
} }
.slides-wrapper .gallery article{ .slides-wrapper .gallery article{
position: relative; position: relative;
...@@ -950,9 +960,10 @@ aside.news-wrapper { ...@@ -950,9 +960,10 @@ aside.news-wrapper {
} }
.nav-slider ul { .nav-slider ul {
position: absolute; position: absolute;
left: 95.5%; left: 100%;
z-index: 999; z-index: 999;
display: table; display: table;
margin-left: 25px;
} }
.nav-slider ul li{ .nav-slider ul li{
background: #182566; background: #182566;
......
wp-content/themes/nap/assets/css/responsive.css
View file @ b5c95c7f
/* ------------------------*/ /* ---------->>> 1280 <<<-----------*/ /* ------------------------*/ /* ------------------------*/ /* ---------->>> 1280 <<<-----------*/ /* ------------------------*/
@media screen and (max-width: 1280px) { @media screen and (max-width: 1280px) {
#slides{
width: 416px;
}
.element-slider{
height: 416px;
}
.product-slides{
padding-left: 5%;
}
} }
/* ------------------------*/ /* ---------->>> 1200 <<<-----------*/ /* ------------------------*/ /* ------------------------*/ /* ---------->>> 1200 <<<-----------*/ /* ------------------------*/
@media screen and (max-width: 1200px) { @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 <<<-----------*/ /* ------------------------*/ /* ------------------------*/ /* ---------->>> 1024 <<<-----------*/ /* ------------------------*/
......
wp-content/themes/nap/assets/js/main.js
View file @ b5c95c7f
...@@ -285,7 +285,6 @@ $.fn.getMenuBg = function(){ ...@@ -285,7 +285,6 @@ $.fn.getMenuBg = function(){
galleryWidth = windowWidth - navPhototequeWidth, galleryWidth = windowWidth - navPhototequeWidth,
filterWidth = $('.right-container .left-panel').outerWidth(), filterWidth = $('.right-container .left-panel').outerWidth(),
footerContact = $('.contact-form .footer').outerHeight(); footerContact = $('.contact-form .footer').outerHeight();
$('.gallery-wrapper').outerWidth(galleryWidth).css('margin-left',navPhototequeWidth) ; $('.gallery-wrapper').outerWidth(galleryWidth).css('margin-left',navPhototequeWidth) ;
$('.main,.load-page').outerHeight(containerHeight); $('.main,.load-page').outerHeight(containerHeight);
$('.full-height').outerHeight(maxHeight); $('.full-height').outerHeight(maxHeight);
...@@ -372,7 +371,7 @@ function onScroll(event){ ...@@ -372,7 +371,7 @@ function onScroll(event){
var currLink = $(this); var currLink = $(this);
var refElement = $(currLink.attr("href")); var refElement = $(currLink.attr("href"));
//console.log(currLink); //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"); $('.subcat a').removeClass("active");
currLink.addClass("active"); currLink.addClass("active");
if ($('nav ul ul').find('li.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 ...@@ -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']} zone6: ['06' , '09' , '11' , '13' , '20' , '30' , '34' , '48' , '66' , '81' , '83' , '84' , '2A' , '2B' , 'ES']}
*/ */
var zones = jQuery.parseJSON(zonesL.listZones); var zones = jQuery.parseJSON(zonesL.listZones);
console.log(zones);
function initMap(){ function initMap(){
setTimeout(function(){ setTimeout(function(){
if(jQuery(document).find('#map').length){ if(jQuery(document).find('#map').length){
......
wp-content/themes/nap/assets/js/product.js
View file @ b5c95c7f
...@@ -86,7 +86,7 @@ $(function(){ ...@@ -86,7 +86,7 @@ $(function(){
$.fn.open_gallery = function(){ $.fn.open_gallery = function(){
$(this).on('click',function(){ $(this).on('click',function(){
tl = new TimelineMax() 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('.gallery',0.5,{opacity:0,visibility:"hidden"},{opacity:1,visibility:"visible"},0);
tl.fromTo('#slides',0.5,{opacity:1},{opacity:0},0); tl.fromTo('#slides',0.5,{opacity:1},{opacity:0},0);
tl.fromTo('.nav-slider',0.5,{opacity:1},{opacity:0},0); tl.fromTo('.nav-slider',0.5,{opacity:1},{opacity:0},0);
...@@ -132,7 +132,6 @@ $(function(){ ...@@ -132,7 +132,6 @@ $(function(){
sizeProductDetails = $('.product-details .list').length; sizeProductDetails = $('.product-details .list').length;
if (sizeProductDetails < 2) { if (sizeProductDetails < 2) {
$('.product-info').outerWidth('78.3%'); $('.product-info').outerWidth('78.3%');
console.log(sizeProductDetails);
} }
$('.pa_couleur li').getListColors(); $('.pa_couleur li').getListColors();
$('.pa_couleur li').selectColor(); $('.pa_couleur li').selectColor();
...@@ -152,7 +151,7 @@ $(function(){ ...@@ -152,7 +151,7 @@ $(function(){
$('.pa_couleur li').selectColor(); $('.pa_couleur li').selectColor();
$('.pa_format li').selectFormat(); $('.pa_format li').selectFormat();
$('.color-list.selected').selectSlide($('#slides')); $('.color-list.selected').selectSlide($('#slides'));
},900) },500)
$('.download-btn:not(.download_file)').click(function(e){ $('.download-btn:not(.download_file)').click(function(e){
e.stopPropagation(); e.stopPropagation();
}); });
......
wp-content/themes/nap/header.php
View file @ b5c95c7f
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
<html <?php language_attributes(); ?> class="no-js no-svg"> <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/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/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-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"> <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 @@ ...@@ -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/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/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/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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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'); ...@@ -69,59 +69,61 @@ do_action('woocommerce_before_add_to_cart_form');
<div id="product" class="clearfix"> <div id="product" class="clearfix">
<div class="product-images row animated"> <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 class="pink-btn circle-btn"><a href="#"><span class = "abs-center backlink">Retour</span></a></div>
</div> </div>
<div class="product-slides"> <div class="product-slides row">
<div class="product-header"> <div class="product-header">
<h2 class="crete -italic font-small"><?php echo $product_cats[1]->name ?></h2> <h2 class="crete -italic font-small"><?php echo $product_cats[1]->name ?></h2>
<h3 class="crete"><?php the_title(); ?></h3> <h3 class="crete"><?php the_title(); ?></h3>
</div> </div>
<div class="nav-slider transition"> <div class="slides-wrapper center">
<ul> <div class="row">
<li id = "mozaique"><span class="icon mozaique row"></span><span class="desc">Mozaïque</span></li> <div class="nav-slider transition">
<li id = "zoom" data-active="false" ><span class="icon zoom"></span><span class="desc">Zoom</span></li> <ul>
<li><span class="icon download"></span><span class="desc">Télécharger</span></li> <li id = "mozaique"><span class="icon mozaique row"></span><span class="desc">Mozaïque</span></li>
</ul> <li id = "zoom" data-active="false" ><span class="icon zoom"></span><span class="desc">Zoom</span></li>
</div> <li><span class="icon download"></span><span class="desc">Télécharger</span></li>
<div class="slides-wrapper"> </ul>
<div id="slides"> </div>
<?php <div id="slides">
$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>
<?php <?php
endforeach; $variations = $product->get_available_variations();
?> $var_colors = nap_distinct_color_variations($variations);
foreach ($var_colors as $key => $value) :
<?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 class="image element-slider easyzoom easyzoom--overlay easyzoom--with-toggle" data-color = "<?php echo $color ?>" data-slick-index = "1"> <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 $hd[0]; ?>"> <a href="<?php echo get_the_post_thumbnail_url($key, 'full') ?>">
<img src="<?php echo $attachment[0]; ?>" alt="" /> <!--<img src="<?php echo get_the_post_thumbnail_url($key, 'medium') ?>" alt="" />-->
</a> </a>
</div> </div>
<?php <?php
endwhile; endforeach;
endif; ?>
?>
<?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 clearfix">
<div class="gallery-content clearfix"> <div class="gallery-content clearfix">
<span class="close-btn"></span> <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