Flexslider IMG set to 0x0 at 768px and below

Flexslider IMG set to 0x0 at 768px and below - javascript

I have a flexslider which works just fine at media queries of 769px and greater however as soon as the viewport gets to 768px wide, the IMG within flexslider is showing up in the Chrome inspector as 0x0 in size. No where in the inspector is the IMG being set to 0x0
http://70e-solutions.mybigcommerce.com/
Here is the full code being called:
<div id="ibSlideShow">
<div class="inner">
<div class="Content Widest" id="LayoutColumn1">
<script type="text/javascript" src="javascript/jquery/plugins/jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('.slide-show').flexslider({
slideshowSpeed: $('.slide-show').attr('data-swap-frequency') * 1000,
animation: "slide",
pauseOnHover: true,
controlNav: true,
directionNav: true
});
});
</script>
<div class="slide-show slide-show-render slide-show-render-full flexslider Panel" data-swap-frequency="1000" id="HomeSlideShow">
<ol class="slides">
<li class="slide clone">
<a href="#">
<div class="slide-content">
<div class="slide-overlay">
<h2 class="slide-heading" style="color: #ffffff"></h2>
<p class="slide-text" style="color: #ffffff"></p>
<div class="slide-button" style="display:none; visibility: hidden"><span class="btn" style="color: #ffffff"></span></div>
</div>
<span class="slide-image-wrapper">
<img class="slide-image" src="http://cdn6.bigcommerce.com/s-y4b1n34/product_images/theme_images/slide_2.jpg?t=1416519561" alt="">
</span>
</div>
</a>
</li>
<li class="slide">
<a href="">
<div class="slide-content">
<div class="slide-overlay">
<h2 class="slide-heading" style="color: #ffffff"></h2>
<p class="slide-text" style="color: #ffffff"></p>
<div class="slide-button" style="display:none; visibility: hidden"><span class="btn" style="color: #ffffff"></span>
</div>
</div>
<span class="slide-image-wrapper">
<img class="slide-image" src="http://cdn6.bigcommerce.com/s-y4b1n34/product_images/theme_images/slide_1.jpg?t=1416519561" alt="">
</span>
</div>
</a>
</li>
<li class="slide">
<a href="">
<div class="slide-content">
<div class="slide-overlay">
<h2 class="slide-heading" style="color: #ffffff"></h2>
<p class="slide-text" style="color: #ffffff"></p>
<div class="slide-button" style="display:none; visibility: hidden"><span class="btn" style="color: #ffffff"></span></div>
</div>
<span class="slide-image-wrapper">
<img class="slide-image" src="http://cdn6.bigcommerce.com/s-y4b1n34/product_images/theme_images/slide_2.jpg?t=1416519561" alt="">
</span>
</div>
</a>
</li>
</ol>
</div>
</div>
</div>
</div>

in responsive.css?t=1416605492 you have
/* 768px */
#media screen and (max-width: 768px) {
/* Hide */
#HomeSlideShow,
#ProductBreadcrumb,
.productlist-page .Left {
display: none;
}
#HomeSlideShow is set to invisible remove #HomeSlideShow from this section

Related

Class is not added by jQuery

I need to add dark overlay to images by adding class imgoverlay using jQuery.
$("#featured .row .col-sm img").hover(
function() {
$(this).addClass('imgoverlay');
},
function() {
$(this).removeClass('imgoverlay');
}
);
.imgoverlay {
height: 100%;
background-color: rgba(18, 15, 65, 0.7);
z-index: 2000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="main" id="featured" data-aos="fade-up">
<div class="container">
<div class="d-flex justify-content-between justify-content-end" data-aos="fade-up">
<div>
<span class="sub-title"><p align="right" data-aos="fade-left" data-aos-duration="3000"> مشاريع مميزة </p></span>
</div>
<div>
<a href="#">
<p align="right"><strong> مشاريعنا الأخرى<i class="fas fa-arrow-left"></i></strong></p>
</a>
</a>
</div>
</div>
<!-- Gallery start -->
<div class="row ">
<div class="col-sm">
<a href="">
<div class="thumb1"><img name="Auoya" src="assets/images/thumb1resize.jpg" alt=""></div>
</a>
<a href="">
<div class="thumb1"><img name="capitalHeights" src="assets/images/thumb2resize.jpg" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb2"><img name="hai-sakani" src="assets/images/thumbMiddleresize.jpg" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb1"><img name="bosco" src="assets/images/thumb3resize.jpg" alt=""></div>
</a>
<a href="">
<div class="thumb1"><img name="armonia" src="assets/images/thumb4resize.jpg" alt=""></div>
</a>
</div>
</div>
</div>
</section>

Pure CSS
You can use pseudo element ::after or ::before, no need to use JS or jQ just add a global class and set hover effect on ::after and active it on :hover
.thumbs:hover::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(18, 15, 65, 0.7);
}
.thumbs {
width: 150px;
height: 150px;
overflow: hidden;
border: 1px solid red;
position: relative;
}
<section class="main" id="featured" data-aos="fade-up">
<div class="container">
<div class="d-flex justify-content-between justify-content-end" data-aos="fade-up">
<div>
<span class="sub-title"><p align="right" data-aos="fade-left" data-aos-duration="3000"> مشاريع مميزة </p></span>
</div>
<div>
<a href="#">
<p align="right"><strong> مشاريعنا الأخرى<i class="fas fa-arrow-left"></i></strong></p>
</a>
</a>
</div>
</div>
<!-- Gallery start -->
<div class="row ">
<div class="col-sm">
<a href="">
<div class="thumb1 thumbs"><img name="Auoya" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
<a href="">
<div class="thumb1 thumbs"><img name="capitalHeights" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb2 thumbs"><img name="hai-sakani" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb1 thumbs"><img name="bosco" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
<a href="">
<div class="thumb1 thumbs"><img name="armonia" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
</div>
</div>

Slick carousel individual overlay

Explanation
I'm trying to set a overlay on each image of the slider (slick.js) when hovering them, but for some reason, when I hover it, the overlay appears on top of the slider (all 12 images), not the image hovered.
Code
You can also see it in JSFiddle and in "fullscreen mode".
ps: it's be better to see the overlay content in fullscreen.
$('.carousel').slick({
arrows: false,
dots: true,
slidesPerRow: 3,
rows: 3
});
.carousel-wrapper {
background-color: rgb(235, 235, 235);
position: relative;
}
img {
background-color: black;
}
.slick-slide {
text-align: center !important;
}
.overlay {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(1, 1, 1, .35);
transition: 0.2s;
opacity: 0;
}
.overlay:hover {
opacity: 1;
}
.overlay-content {
color: rgb(255, 255, 255);
position: absolute;
top: 50%;
left: 50%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
</head>
<body>
<section class="carousel-wrapper">
<div class="container">
<div class="row">
<ul class="col-md-12 carousel text-center">
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
</body>
</html>
Thanks in advance,
Luiz.

Why is it not working?
Your code doesn't work as expected because your overlay is being positioned relatively to .carousel-wrapper not the a element (.carousel-wrapper is the first parent of .overlay that has position other than static - if you don't set your position explicitly it defaults to static).
How to avoid this mistake in the future?
If you want any element on your website to have an overlay (or in general you want to use position: absolute somewhere) you need to remember that this element is going to be positioned relatively to it's parent that has positon: relative or position: absolute. If there's no such element it's going to position itself to <html>.
It's very well explained here:
Remember that these values will be relative to the next parent element
with relative (or absolute) positioning. If there is no such parent,
it will default all the way back up to the element itself
meaning it will be placed relatively to the page itself.
(on absolute positioning)
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Check the working demo:
https://jsfiddle.net/thffcgqc/2/

Wrap your anchor tags and overlay content in a separate div and style as follows. The reason is due to the fact that you are not using a margin-right for whitespace between boxes. You are simply using a fixed with li tags and the images leaves a gap in the parent container . If an overlay is placed, you will see the overlay over the white gap and the image (which is somewhat not what you want - I believe)
See snippet below
$('.carousel').slick({
arrows: false,
dots: true,
slidesPerRow: 3,
rows: 3
});
.carousel-wrapper {
background-color: rgb(235, 235, 235);
position: relative;
}
img {
background-color: black;
}
.slick-slide {
text-align: center !important;
}
.overlay {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(1, 1, 1, .35);
transition: 0.2s;
opacity: 0;
background: red;
z-index: 1;
}
.overlay:hover {
opacity: 1;
}
.overlay-content {
color: rgb(255, 255, 255);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
position: relative;
display: inline-block;
}
a:hover .overlay {
opacity: 1
}
.img_cont {
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
</head>
<body>
<section class="carousel-wrapper">
<div class="container">
<div class="row">
<ul class="col-md-12 carousel text-center">
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
</body>
</html>

Collapsing a div and opening another one bootstrap

I'm using Bootstrap and I'm trying to use the Collapse.
I want the div #film to hide when I click the <li class="rekruterring>and I'm missing something. It won't close no matter what I do, I've tried with accordion, data-parents, javascript and nothing makes the #filmdiv hide when I click the .rekruterring and the #rekruttering div is shown.
Here's my code and be aware that the #rekruterring is expanding as it should, but is not hiding #film.
/* Latest compiled and minified JavaScript included as External Resource */
/* DOES NOTHING */
$(document).ready(function() {
$(".rekruttering").click(function() {
$("#film").collapse('hide');
});
})
/* VIMEO */
img {
max-width: 100%;
height: auto;
}
.video {
background: #fff;
padding-bottom: 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
width: 100%;
/* Thumbnails 5 across */
margin: 1%;
}
.video img {
width: 100%;
opacity: 1;
}
.video img:hover,
.video img:active,
.video img:focus {
opacity: 0.75;
}
.categories li {
list-style-type: none;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="accordion" class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Galleri</h2>
<hr class="bg-primary">
</div>
<div class="col-lg-12 categories text-center">
<ul>
<a class="film" data-toggle="collapse" data-target="#film" data-parent="#accordion">Firmapræsentation</a> |
<a class="rekruterring" data-toggle="collapse" data-target="#rekruterring" data-parent="#accordion">Rekruterringsfilm</a> |
<li>TV -/Biografspots & Imagefilm</li>|
<li>Salgs- & Produktfilm</li>
</ul>
</div>
</div>
<div id="film" class="row text-centered collapse in">
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h2 class="videoTitle" style="text-align:center;">FILM</h2>
</article>
</div>
</div>
<!-- FILM -->
<div id="rekruterring" class="row text-centered collapse">
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h2 class="videoTitle" style="text-align:center;">REKRUTERRING</h2>
</article>
</div>
</div>
<!-- REKRUTERRING -->
</div>

This is not working because there is a Bootstrap bug/issue when using the parent class. It relies on the use of the panel class being wrapped around your collapse elements.
https://github.com/twbs/bootstrap/issues/10966
Updated JSFiddle
<div class="panel">
<div id="film" class="row text-centered collapse in">
<div class="panel">
<div id="rekruterring" class="row text-centered collapse">

Slideshow image blows up on page load

I just added a slider and carousel to my Volusion website homepage.
However, when I went to the page, the first carousel image would blow up to a huge size (original size is only 180 x 270) and flash twice. So I looked through the code and removed a line:
<script src="/v/vspfiles/templates/192/homepage/js/jquery.js" type="text/javascript"></script>
Because I thought maybe it's trying to load the javascript twice or something.
After I did this, the carousel image still blows up to a huge size on load, but only once.
Here is the page where it is happening on: http://www.wallsrepublic.com
All of the relevant code I have on my home page is below:
<script src="/v/vspfiles/templates/192/homepage/js/mobilyslider.js" type="text/javascript"></script>
<script src="/v/vspfiles/templates/192/homepage/js/init.js" type="text/javascript"></script>
For the main slider:
<link rel="stylesheet" href="http://www.wallsrepublic.com/v/slider/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://www.wallsrepublic.com/v/Slider/jquery.flexslider.js"></script>`
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$(".flexslider").flexslider();
});
$(window).load(function() {
$(".flexslider").flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
</script>
<div class="flexslider" style="width:auto;overflow:hidden;">
<ul class="slides">
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm' ><img alt='Home Wallpaper' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Murals' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide2-1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Sale' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide3.jpg" height='452' width='975' border='0' /></a>
</li>
</ul>
</div>
For the problematic carousel:
<script src="http://wallsrepublic.com/v/carousel/amazingcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="http://wallsrepublic.com/v/carousel/initcarousel-1.css">
<script src="http://wallsrepublic.com/v/carousel/initcarousel-1.js"></script>
<!-- PRODUCT CAROUSEL -->
<div id="amazingcarousel-container-1">
<div id="amazingcarousel-1" style="display:block;position:relative;width:100%;max-width:900px;margin:0px auto 0px;">
<div class="amazingcarousel-list-container">
<ul class="amazingcarousel-list">
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-damask-wallpaper-p/r2067-parent.htm" title="GOLD DAMASK " ><img src="http://wallsrepublic.com/v/carousel/1.png" alt="GOLD DAMASK " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GOLD DAMASK </div>
<div class="amazingcarousel-description">$159 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/grey-overlay-wallpaper-p/s43712-parent.htm" title="GREY OVERLAY " ><img src="http://wallsrepublic.com/v/carousel/2.png" alt="GREY OVERLAY " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GREY OVERLAY </div>
<div class="amazingcarousel-description">$89 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-white-dogstooth-wallpaper-p/r2542-parent.htm" title="BLACK & WHITE DOGSTOOTH " ><img src="http://wallsrepublic.com/v/carousel/3.png" alt="BLACK & WHITE DOGSTOOTH " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLACK & WHITE DOGSTOOTH </div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/brown-fawn-wallpaper-p/r2339-parent.htm" title="BROWN FAWN " ><img src="http://wallsrepublic.com/v/carousel/4.png" alt="BROWN FAWN " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BROWN FAWN </div>
<div class="amazingcarousel-description">$139 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/R1373-p/r1373-parent.htm" title="SERENITY SAND" ><img src="http://wallsrepublic.com/v/carousel/5.png" alt="SERENITY SAND" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">SERENITY SAND</div>
<div class="amazingcarousel-description">$149 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/taupe-stone-modern-residential-wallpaper-R1875-p/r1875-parent.htm" title="BLOCK-STONE GREY" ><img src="http://wallsrepublic.com/v/carousel/6.png" alt="BLOCK-STONE GREY" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLOCK-STONE GREY</div>
<div class="amazingcarousel-description">$79 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/marsala-running-brick-wallpaper-p/r2587-parent.htm" title="MARSALA RUNNING BRICK" ><img src="http://wallsrepublic.com/v/carousel/7.png" alt="MARSALA RUNNING BRICK" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">MARSALA RUNNING BRICK</div>
<div class="amazingcarousel-description">$79 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/geometric-gold-residential-wallpaper-R1861-p/r1861-parent.htm" title="TIA GOLD" ><img src="http://wallsrepublic.com/v/carousel/8.png" alt="TIA GOLD" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">TIA GOLD</div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/antique-world-map-mural-p/m9167-parent.htm" title="ANTIQUE WORLD MAP MURAL" ><img src="http://wallsrepublic.com/v/carousel/9.png" alt="ANTIQUE WORLD MAP MURAL" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">ANTIQUE WORLD MAP MURAL</div>
<div class="amazingcarousel-description">$399 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/blue-wood-pattern-residential-wallpaper-R1878-p/r1878-parent.htm" title="BRUSHED WOOD BLUE" ><img src="http://wallsrepublic.com/v/carousel/10.png" alt="BRUSHED WOOD BLUE" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BRUSHED WOOD BLUE</div>
<div class="amazingcarousel-description">$89 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-and-white-lattice-wallpaper-p/r2548-parent.htm" title="BLACK & WHITE LATTICE" ><img src="http://wallsrepublic.com/v/carousel/11.png" alt="BLACK & WHITE LATTICE" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLACK & WHITE LATTICE</div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-victorian-wallpaper-p/s43751-parent.htm" title="GOLD VICTORIAN" ><img src="http://wallsrepublic.com/v/carousel/12.png" alt="GOLD VICTORIAN" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GOLD VICTORIAN</div>
<div class="amazingcarousel-description">$149 USD</div>
</div> </div>
</li>
</ul>
<div class="amazingcarousel-prev"></div>
<div class="amazingcarousel-next"></div>
</div>
<div class="amazingcarousel-nav"></div>
</div>
</div>
I had the javascript and css files in my template header before, but then the slideshows did not work so I had to move them to be directly on the home page.
Any help would be appreciated.

$(window).load(function() {
$(".flexslider").flexslider();
});
Try to remove those lines, you are calling the slider 2 times for the same class.

I don't think it's an issue with Flexslider that's causing this.
As far as I can tell, it is caused by the wallpaper swatch displaying at 100% width before the amazing carousel plugin kicks in and wraps the image to a smaller width.
Try adding this to your stylesheet
.amazingcarousel-item {
float: left;
width: 150px;
}
This will give the carousel item a width by default, which in turn causes the image inside it to be a smaller width.

Jquery Cycle: Can't navigate through slides

I'm trying to make a slider with jQuery Cycle where, when you click on one of 5 thumbnails, you switch to the right slide in the slider. Those thumbs are external to the slider.
Thing is, for some reason, the startingSlide argument doesn't work and just doing .cycle(number) doesn't either, even if the slider is clearly running. Here's a peek at the code:
JS
jQuery(document).ready(function(){
var current_slide;
jQuery('#slider_accueil').cycle({
fx: 'fade',
timeout: 3000,
after: onAfter,
startingSlide: 0,
pager: '#nav',
next: '.next_btn_slider',
prev: '.prev_btn_slider'
});
function onAfter(curr,next,opts){
jQuery('.indicator').removeClass('current')
current_slide=opts.currSlide + 1
jQuery('#thumb'+current_slide+' .indicator').addClass('current')
}
jQuery('#thumb1').click(function(){
jQuery('#slider_accueil').cycle(0);
return false;
})
jQuery('#thumb2').click(function(){
jQuery('#slider_accueil').cycle(1);
return false;
})
jQuery('#thumb3').click(function(){
jQuery('#slider_accueil').cycle(2);
return false;
})
jQuery('#thumb4').click(function(){
jQuery('#slider_accueil').cycle(3);
return false;
})
jQuery('#thumb5').click(function(){
jQuery('#slider_accueil').cycle(4);
return false;
})
})
html
<div id="sliderAccueil">
<div id="nav" style="display:none;"></div>
<img src="/wp-content/themes/customtheme/images/slider_previous.png" class="prev_btn_slider">
<img src="/wp-content/themes/customtheme/images/slider_next.png" class="next_btn_slider">
<div id="slider_accueil" style="position: relative;">
<div style="position: absolute; top: 0px; left: 0px; z-index: 5; opacity: 0; display: none;">
<img src="/wp-content/uploads/2011/09/slider1.jpg">
<div>
<div class="maintext">
<h2>Slide 1</h2>
<p>Slide 1</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><ig src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 4; display: none; opacity: 0;">
<ig src="/wp-content/uploads/2011/09/slider2.jpg">
<div>
<div class="maintext">
<h2>Slide 2</h2>
<p>Slide 2</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 3; display: block; opacity: 0.942616;">
<img src="/wp-content/uploads/2011/09/slider3.jpg">
<div>
<div class="maintext">
<h2>Reprise des travaux majeurs</h2>
<p>Slide 3</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 2; display: block; opacity: 0.0573843;">
<img src="/wp-content/uploads/2011/09/slider4.jpg">
<div>
<div class="maintext">
<h2>Slide 4</h2>
<p>Slide 4</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 1; display: none; opacity: 0;">
<img src="/wp-content/uploads/2011/09/slider5.jpg">
<div>
<div class="maintext">
<h2>Slide 5</h2>
<p>Slide 5</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
</div>
<div id="thumbnails_slider_accueil">
<ul>
<li>
<b id="thumb1" href="#1">
<div class="indicator"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb1.png)" class="thumbnail">
<p>Voies retranchées trains ajoutés</p>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<b id="thumb2" href="#2">
<div class="indicator"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb2.jpg)" class="thumbnail">
<p>Événements</p>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<b id="thumb3" href="#3">
<div class="indicator current"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb3.jpg)" class="thumbnail">
<p></p>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<b id="thumb4" href="#4">
<div class="indicator"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb4.jpg)" class="thumbnail">
<p>Appels d'offres</p>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<b id="thumb5" href="#5">
<div class="indicator"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb5.jpg)" class="thumbnail">
<p>Environnement</p>
</div>
<div class="clear"></div>
</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
^check source, seems I cant put that cleaner than this.
Anybody have an idea?
PS, It's on purpose that all img are ig and all links are ... Stackoverflow wouldn't let me post.

I found the answer to my own question...
Seems that to use jQuery('#slider_accueil').cycle(0); you need to have the full version linked, and not the lite.
Seems like that function is one of those who have been taken out from the conversion from full to lite... Note to self: The lite versions may not have the function you want to do... just spent 2 hours trying all kinds of stuff on that. :p

Develop Reference

JavaScript is the programming language of the Web.

Flexslider IMG set to 0x0 at 768px and below - javascript

in responsive.css?t=1416605492 you have /* 768px / #media screen and (max-width: 768px) { / Hide */ #HomeSlideShow, #ProductBreadcrumb, .productlist-page .Left { display: none; } #HomeSlideShow is set to invisible remove #HomeSlideShow from this section

Related

Class is not added by jQuery

Slick carousel individual overlay

Collapsing a div and opening another one bootstrap

Slideshow image blows up on page load

Jquery Cycle: Can't navigate through slides

Categories

Resources

Develop Reference

JavaScript is the programming language of the Web.

Flexslider IMG set to 0x0 at 768px and below - javascript

in responsive.css?t=1416605492 you have /* 768px */ #media screen and (max-width: 768px) { /* Hide */ #HomeSlideShow, #ProductBreadcrumb, .productlist-page .Left { display: none; } #HomeSlideShow is set to invisible remove #HomeSlideShow from this section

Related

Class is not added by jQuery

Slick carousel individual overlay

Collapsing a div and opening another one bootstrap

Slideshow image blows up on page load

Jquery Cycle: Can't navigate through slides

Categories

Resources

in responsive.css?t=1416605492 you have /* 768px / #media screen and (max-width: 768px) { / Hide */ #HomeSlideShow, #ProductBreadcrumb, .productlist-page .Left { display: none; } #HomeSlideShow is set to invisible remove #HomeSlideShow from this section