Anybody have any suggestions for me?
I have a Flexslider 2.2 Slider and Carousel on my page that scrolls through 8 images. After the eighth, I have the animationLoop set to True to force it to keep repeating the eight. The problem is that after the Slider and Carousel has navigated all eight, the Slider goes back to Slide 1, but the Carousel is stuck until the Slider gets to the second image. Then the Carousel syncs back up and works for 2-8 slides.
This can be seen at: http://www.raggeddaisy.com
Here is my Head:
<head>
<title> Ragged Daisy - Handcrafted Home Decor </title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<!-- Syntax Highlighter -->
<script type="text/javascript" src="~/Scripts/shCore.js"></script>
<script type="text/javascript" src="~/Scripts/shBrushXml.js"></script>
<script type="text/javascript" src="~/Scripts/shBrushJScript.js"></script>
<script src="~/Scripts/modernizr.js"></script>
<!-- Optional FlexSlider Additions -->
<script src="~/Scripts/jquery.easing.js"></script>
<script src="~/Scripts/jquery.mousewheel.js"></script>
<!-- FlexSlider -->
<script src="~/Scripts/jquery.flexslider.js"></script>
<script src="~/Scripts/jquery.flexslider-min.js"></script>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" href="~/Content/flexslider.css" type="text/css" media="screen" />
</head>
Here is my body:
<body>
<div id="bodyHeader" class="bodyHeader">
HOME
</div>
<div id="bodyText" class="bodyText">
Welcome to Ragged Daisy! We are a family-owned operation dedicated to designing quality, handcrafted home decor. All of our pieces are uniquely created from scratch using quality materials designed to last. We take pride in our craftsmanship from start to finish, as each piece is expertly made with exceptional precision and care.
<br> <br>
Our collections are all hand finished to produce a beautiful depth of color and texture. Whether you are looking to capture the warmth and playful charm of softly worn, authentic pieces, or emphasize glamour and elegance with chic, sophisticated pieces, our collection is designed to add flare and functionality in all the spaces you live, work and play.
<br> <br>
Ragged Daisy is located just a few miles north of Minneapolis, Minnesota, USA. We ship product locally and nationally. We are honored when you choose us to create a special handcrafted piece for your space. Our collections are evolving and growing so please check back with us!
</div>
<!-- Beginning of Slideshow -->
<div id="main" role="main">
<section class="slider">
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" alt="Ragged Daisy - Decorative AMORE Wooden Sign" />
</li>
<li>
<img src="~/Images/Products/MagneticBoard/PNG/1-SmallProvincial_tanswirls.png" alt ="Ragged Daisy - Magnetic Board with Provincial Stain and Tan Swirls Fabric"/>
</li>
<li>
<img src="~/Images/Products/Bench/PNG/1-BenchFullShot.png" alt ="Ragged Daisy - Stylish Wooden Pallet Bench"/>
</li>
<li>
<img src="~/Images/Products/Bench/PNG/2-CabinRight.png" alt="Ragged Daisy - Stylish Wooden Pallet Bench Provincial Stain" />
</li>
<li>
<img src="~/Images/Products/MagneticBoard/PNG/2-vintagewhiteframe_mexicanfiesta_fullshot.png" alt ="Ragged Daisy - Magnetic Board with Vintage White Frame and Mexican Fiesta Fabric"/>
</li>
<li>
<img src="~/Images/Products/MagneticBoard/PNG/3-vintagewhiteframe_tanswirls_fullshot.png" alt ="Ragged Daisy - Magnetic Board with Vintage White Frame and Tan Swirls Fabric"/>
</li>
<li>
<img src="~/Images/Products/MagneticBoard/PNG/4-TurquoiseBoard_outsideshot.png" alt ="Ragged Daisy - Magnetic Board with Turquoise Weathered Finish with Metal and Hooks"/>
</li>
<li>
<img src="~/Images/Products/WoodenSign/PNG/3-LOVE.PNG" alt="Ragged Daisy - Decorative LOVE Wooden Sign"/>
</li>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" alt="Ragged Daisy - Decorative AMORE Wooden Sign" />
</li>
<li>
<img src="~/Images/Products/MagneticBoard/PNG/1-SmallProvincial_tanswirls.png" alt ="Ragged Daisy - Magnetic Board with Provincial Stain and Tan Swirls Fabric"/>
</li>
<li>
<img src="~/Images/Products/Bench/PNG/1-BenchFullShot.png" alt ="Ragged Daisy - Stylish Wooden Pallet Bench"/>
</li>
<li>
<img src="~/Images/Products/Bench/PNG/2-CabinRight.png" alt="Ragged Daisy - Stylish Wooden Pallet Bench Provincial Stain" />
</li>
<li>
<img src="~/Images/Products/MagneticBoard/PNG/2-vintagewhiteframe_mexicanfiesta_fullshot.png" alt ="Ragged Daisy - Magnetic Board with Vintage White Frame and Mexican Fiesta Fabric"/>
</li>
<li>
<img src="~/Images/Products/MagneticBoard/PNG/3-vintagewhiteframe_tanswirls_fullshot.png" alt ="Ragged Daisy - Magnetic Board with Vintage White Frame and Tan Swirls Fabric"/>
</li>
<li>
<img src="~/Images/Products/MagneticBoard/PNG/4-TurquoiseBoard_outsideshot.png" alt ="Ragged Daisy - Magnetic Board with Turquoise Weathered Finish with Metal and Hooks"/>
</li>
<li>
<img src="~/Images/Products/WoodenSign/PNG/3-LOVE.PNG" alt="Ragged Daisy - Decorative LOVE Wooden Sign"/>
</li>
</ul>
</div>
</section>
</div>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 105,
itemMargin: 0,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true,
sync: "#carousel",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
</body>
Had same problem and made a workaround.
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true,
sync: "#carousel",
start: function(slider){
$('body').removeClass('loading');
}
before: function(slider){
if(slider.currentSlide == 0 && slider.direction == "prev"){ //start
var carousel = $(slider.vars.sync).data('flexslider');
carousel.flexAnimate(carousel.last);
}else if( slider.currentSlide == slider.last && slider.direction == "next"){ // end
var carousel = $(slider.vars.sync).data('flexslider');
carousel.flexAnimate(0);
}
}
});
Related
I am new to Bigcommerce and also to Handlebars. I am currently building a website according to a design and I am using the Merchant Stencil theme.
Here is a picture of the homepage structure I need
For the moment, I hardcoded the 3 sections in the home.html template file, but I want to bring the product information (url, name, description) dynamically for each product based on it's ID .
The store only sells 3 types of products At the moment, I have a featured products section with the all the 3 products set as featured. This is working fine. The second part is that I want to access a Product Object or Product Card object (documentation links added) and I don't know how to do it. They don't have code examples and I really can't find my way around it. Any help on how can I use these objects would be much appreciated.
I have even asked the Bigcommerce support, and they sent me here. The support people there have no clue about development on their platform, so they sent me here.
Cheers!
Here is the code in my home.html file.
{{#if products.featured}}
<section class="products-featured section">
<h4 class="section-title">{{lang 'home.featured_products'}}</h4>
<div class="wrapper">
{{#each products.featured}}
{{> components/products/product-grid-item
quick_shop=../theme_settings.quick_shop
}}
{{/each}}
</div>
</section>
{{/if}}
<section id="gg-one" class="glue-section">
<div class="container">
<div class="text-col">
<h2 class="section-title">Grizzly One</h2>
<p class="caption-content">North America's first liquid polyurethane glue - a high-tech adhesive widely used by European woodworks and craftsmen for decades.</p>
<ul class="glue-feats">
<li>Ideal for proffessional, commercial, and industrial woodworking needs.</li>
<li>Even bonds to oily and exotic woods!</li>
</ul>
<div class="buttons">
</div>
</div>
<div class="img-col">
</div>
</div>
</section>
<section id="gg-structan" class="glue-section">
<div class="container">
<div class="img-col">
</div>
<div class="text-col">
<h2 class="section-title">Grizzly Structan</h2>
<p class="caption-content">This heavy-bodied, cartridge-loaded
polyurethane adhesive is stronger than liquid polyurethane
glues.</p>
<ul class="glue-feats">
<li>Perfect for wood, stone, tile, metal, and glass - dries to a tough elastic texture.</li>
<li>Industrial strength - ideal for professional and commercial applications.</li>
</ul>
<div class="buttons">
</div>
</div>
</div>
</section>
<section id="gg-xpress" class="glue-section">
<div class="container">
<div class="text-col">
<h2 class="section-title">Grizzly Xpress</h2>
<p class="caption-content">All the srength and body of a semi-gel adhesive<br> with a quick setting and curing time.</p>
<ul class="glue-feats">
<li>The first and only semi-gel adhesive available in North America!</li>
<li>Quick, professional-strength bond for wood, stone, tile, metal and glass.</li>
</ul>
<div class="buttons">
</div>
</div>
<div class="img-col">
<div class="inner">
<img src="https://cdn3.bigcommerce.com/s-jgnuwblrjb/product_images/uploaded_images/grizzly-xpress-home.png">
</div>
</div>
</div>
</section>
Create a component for the dynamic sections below the featured section. Then do
{{#each products.featured}}
{{> components/products/your-new-component }}
{{/each}}
Inside your component, you will get product object and you can get the data by simply {{product.id}} or {{product.title}}
I have a forum that i found the code for online and i am customizing it. I'm using bootstrap 3, and inside the forum i want to have an 8 x 4 grid. I followed a tutorial but instead of placing it side by side the two divs are top and bottom
<div class="row">
<div class="col-md-8">
<div class="firstPost"
<div class="postHeading">
<h3>My shot, Banff Pano</h3>
</div>
<div class="postBody">
<p>
Here is a shot of Banff Alberta, Canada.
I took a series of photographs in the portrait orientation
and, using Lightroom and Photoshop, I stitched them together and
adjusted the image to bring out more contrast and colors. The settings
are f/11 at 1/500s; ISO 280.
</p>
<p>
I'm wondering if I should have used a wider aperture and
let the background be a little more blurred
</p>
</div>
<div class="postImage">
<img src="assets/banff.jpg" />
</div>
<div class="postFooter">
<p>
Posted on 7/23/15 at 12:05PM
</p>
</div>
</div>
</div> <!-- end of 8 -->
<div class="col-md-4">
<p>Something goes here</p>
</div>
</div> <!-- end of row -->
your are missing a closing tag > here
<div class="firstPost"
should be
<div class="firstPost">
This is what I'm trying to achive:
I have list of images which are rotating inside a div (fade in, fade out effect)
in each rotation there is one which displays and all the rest are hidden (display: none)
I am trying to create a "resize" event which will always check the height of only existing image (the only one that is showing in the sequence) and assign this height to it's main container (in my case: the UL)
Here is my HTML:
<ul id="output">
<li>
<div class="description">Lorem Ipsum</div>
<img src="images/sample1.jpg">
</li>
<li>
<div class="description">Lorem Ipsum</div>
<img src="images/sample2.jpg">
</li>
<li>
<div class="description">Lorem Ipsum</div>
<img src="/images/sample3.jpg">
</li>
</ul>
and my JS:
jQuery(window).resize(function() {
slide_img = jQuery.find("ul#output li img");
slide_img_height = jQuery(slide_img).height();
if(jQuery(slide_img).css("display") != "none"){
jQuery("ul#output").height(slide_img_height);
}
});
It is not working. it also get the height of the "hiddden" images in the sequence and displays their height (which equals to 0)
how do I pull only the image with the display block always and get it's height and then assign it to the main UL?
Thanks
Let me make sure I understand your question:
1.) You have a container for several images, only one of which will be visible at a time.
2.) You want to change the size of the container to just fit the image currently displayed.
3.) Are you also trying to display the height (in pixels) as a text element?
If you're just trying to accomplish the first two, you can nest your images in a instead of like:
<div id='output'>
<div class='container'>
<div class='description'>Lorem ipsum</div>
<div class='image>
<img src='images/sample1.jpg' />
</div>
</div>
<div class='container'>
<div class='description'>Lorem ipsum</div>
<div class='image>
<img src='images/sample2.jpg' />
</div>
</div>
<div class='container'>
<div class='description'>Lorem ipsum</div>
<div class='image>
<img src='images/sample3.jpg' />
</div>
</div>
</div>
If you do this, the height of your 'output' div will always be the height of the only displayed image. If you needed to display the value of the actual height, you could use:
var outputHeight = $('#output').height();
Since I can't add enough code in a comment to answer your follow-on question, here it is:
If you need to keep your original structure, try this:
<ul id="output">
<li class="container active">
<div class="description">Lorem Ipsum</div>
<img src="images/sample1.jpg" />
</li>
<li class="container">
<div class="description">Lorem Ipsum</div>
<img src="images/sample2.jpg" />
</li>
<li class="container">
<div class="description">Lorem Ipsum</div>
<img src="images/sample3.jpg" />
</li>
</ul>
Then you can select the <li>'s to be either hidden or visible with some CSS like this:
.contaner {
display: none;
}
.active {
display: inline;
}
Like this, the entire <li> gets removed when you set display: none; and only the visible one will take up space in the <ul>. That will let your <ul> only be as high as the currently displayed image.
Hopefully that answers your question.
So eventually, this is what I came up with and it works perfectly:
jQuery(window).resize(function() {
// variables presenting the LI, IMG and th eheigt of the img
slide_li = jQuery("ul#output li").css('display','list-item');
slide_img = jQuery(slide_li).find('img');
slide_img_height = jQuery(slide_img).height();
jQuery("ul#output").height(slide_img_height);
});
This way I was able to find the only image that has a display of "list-item" (I know it's weird but this is how the slider works, I didn't build it)
and then, get the image height and assign it to the main container which is in my case:
ul#output
Credit to #anson for doing his best to help
Thanks
I have just implemented Flexslider2 Slider w/thumbnail controlNav Pattern. The problem is that I have 8 images that I want to scroll through. Right now, the thumbnails are displaying all 8 thumbnails below the main image. I would like to limit the max number of Thumbnails displaying to 4, and then scroll the thumbnails when it gets to images 5-8.
The maxItems: 4, does not seem to be working for me.
Here is my JS:
<script>
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails",
maxItems: 4,
});
});
</script>
Here is my HTML:
<div class="flexslider">
<ul class="slides">
<li data-thumb="/Images/Products/WoodenSign/PNG/1-AMORE.PNG">
<img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" />
</li>
<li data-thumb="/Images/Products/MagneticBoard/PNG/1-SmallProvincial_tanswirls.png">
<img src="~/Images/Products/MagneticBoard/PNG/1-SmallProvincial_tanswirls.png" alt ="Ragged Daisy - Magnetic Board with Provincial Stain and Tan Swirls Fabric"/>
</li>
<li data-thumb="/Images/Products/Bench/PNG/1-BenchFullShot.png">
<img src="~/Images/Products/Bench/PNG/1-BenchFullShot.png" alt ="Ragged Daisy - Stylish Wooden Pallet Bench"/>
</li>
<li data-thumb="/Images/Products/Bench/PNG/2-CabinRight.png">
<img src="~/Images/Products/Bench/PNG/2-CabinRight.png" alt="Ragged Daisy - Stylish Wooden Pallet Bench Provincial Stain"/>
</li>
<li data-thumb="/Images/Products/MagneticBoard/PNG/2-vintagewhiteframe_mexicanfiesta_fullshot.png">
<img src="~/Images/Products/MagneticBoard/PNG/2-vintagewhiteframe_mexicanfiesta_fullshot.png" alt ="Ragged Daisy - Magnetic Board with Vintage White Frame and Mexican Fiesta Fabric"/>
</li>
<li data-thumb="/Images/Products/MagneticBoard/PNG/3-vintagewhiteframe_tanswirls_fullshot.png">
<img src="~/Images/Products/MagneticBoard/PNG/3-vintagewhiteframe_tanswirls_fullshot.png" alt ="Ragged Daisy - Magnetic Board with Vintage White Frame and Tan Swirls Fabric"/>
</li>
<li data-thumb="/Images/Products/MagneticBoard/PNG/4-TurquoiseBoard_outsideshot.png">
<img src="~/Images/Products/MagneticBoard/PNG/4-TurquoiseBoard_outsideshot.png" alt ="Ragged Daisy - Magnetic Board with Turquoise Weathered Finish with Metal and Hooks"/>
</li>
<li data-thumb="/Images/Products/WoodenSign/PNG/3-LOVE.PNG">
<img src="~/Images/Products/WoodenSign/PNG/3-LOVE.PNG" alt="Ragged Daisy - Decorative LOVE Wooden Sign"/>
</li>
</ul>
</div>
You have to define the Flexslider width in your css file let's say put it to width: 400px in the flexslider.css
.flexslider {
width: 400px;
}
and then in your jQuery initialization of the slider define the width of the single slide, like this:
$('.flexslider').flexslider({
itemWidth: 100
});
This is defining a width of 100px for every single slide. With this setup you should have 4 slides displayed.
Google recommends using the attribute itemscope with div tags and span tags.
Can they be used with HTML 5 section tag without trouble ?
<section id="product" itemscope itemtype="http://data-vocabulary.org/Product">
....
</section>
Yes. The specs explicitly use the <section> tags in an example. They also use other tags besides <div> and <span> as well.
<section itemscope itemtype="http://example.org/animals#cat">
<h1 itemprop="name">Hedral</h1>
<p itemprop="desc">Hedral is a male american domestic
shorthair, with a fluffy black fur with white paws and belly.</p>
<img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months">
</section>