Flexslider Issues: Arrows, Sync, and Image Quality

New Member
1 0 0

Please bare with me, as I know very little about coding.

I have installed Flexslider on a page to create a slideshow.  I created a new page template and added the code that is required to go in the <head> of the doc.  I've added the HTML to the page itself, and everything ALMOST looks ok, except for a few glaring issues.

1.  The thumbnail images are not linked to the main images, so if you click on one, it does not bring you to the corresponding main image.  (I think this has something to do with the warning "The slider being synced must be initialized first" but I don't know what that means, so I probably haven't done it)

2.  I've uploaded the font files to the assets, but I'm getting weird boxes instead of the navigation arrows.  It looks like it's not reading the flexslider-icon font.

3.  The image quality has been greatly reduced.  The images are 1024 px wide, and yet they look fuzzy in the flexslider.  From what I can tell the max width in the stylesheet is set to auto, and if I try and mess with that it makes the thumbnails big too.  I can't find any reason why the images would be compressed.

Here is the code for the page template: 

<head>
  {{ '//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' | script_tag }}
  {{ 'flexslider.css' | asset_url | stylesheet_tag }}
  {{ 'jquery.flexslider.js' | asset_url | script_tag }}
  {{ 'jquery.flexslider-min.js' | asset_url | script_tag }} 
  <script type="text/javascript" charset="utf-8">// <![CDATA[
$(window).load(function() {
  // The slider being synced must be initialized first
    $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider'
  });
});
// ]]></script>
  </head>
<div class="sixteen columns">
  <div class="section clearfix">
    <h1>{{ page.title }}</h1>
  </div>
</div>

<div class="sixteen columns">
  <div class="section clearfix">  
    {% include 'page-multi-column', content: page.content %}
  </div>
</div>

Here is the HTML for the page itself: 

<div id="slider" class="flexslider">  
<ul class="slides">
<li>
<a href="https://www.marketsquarejewelers.com/collections/agate"> <img src="//cdn.shopify.com/s/files/1/1401/8791/files/agate-slide_1024x1024.jpg?v=1533151194" alt="Agate is a form of quartz that is often banded, but may also have distinctive inclusions, such as dendritic agate and moss agate. Can be any color of the rainbow, as well as black, white or gray.  Agate is translucent. Historically, agate used in commercial production was found in the Idar-Oberstein region of Germany.  Even after large agate deposits were found in Rio Grande de Sul in Brazil in the 1800’s, the stone was still sent to Germany for cutting by expert craftsmen.  Today, agate is sourced from all over the world, including western regions in the U.S." /> </a></li>
<li><a href="https://www.marketsquarejewelers.com/collections/alexandrite"> <img src="//cdn.shopify.com/s/files/1/1401/8791/files/alexandrite-slide_1024x1024.jpg?v=1533151213" alt="Alexandrite is part of the chrysoberyl family.  Natural alexandrite is rare, especially in sizes larger than 1 carat.  Synthetic alexandrite contains the same chemical and physical properties as its natural counterpart, but is grown in a lab.  " /> </a>
</li>
<li>
<a href="https://www.marketsquarejewelers.com/collections/amber"> <img src="//cdn.shopify.com/s/files/1/1401/8791/files/amber-slide_1024x1024.jpg?v=1533151220" alt="Amber is a copal resin that is at least million years old.  It may be opaque yellow (butterscotch amber), green, bone white, black, brown, or the common orange hue. " /> </a>
</li>
<li>
<a href="https://www.marketsquarejewelers.com/collections/amethyst"> <img src="//cdn.shopify.com/s/files/1/1401/8791/files/amethyst-slide_1024x1024.jpg?v=1533151229" alt=" Once as expensive as rubies and emeralds, the discovery of large amethyst deposits in Brazil soon allowed for the gem’s mass appeal.  Amethyst has long been believed to hold special powers, from preventing intoxication (amethystos translates to “not drunk” in Ancient Greek), to quickening intelligence (per 15th Century astrologer Camillo Leonardi), to relieving stress according to holistic medicine." /> </a>
</li>
<li>
<a href="https://www.marketsquarejewelers.com/collections/ametrine"> <img src="//cdn.shopify.com/s/files/1/1401/8791/files/ametrine-slide_1024x1024.jpg?v=1533151235" alt=" Ametrine combines the quartz varieties of amethyst and citrine. The purple of amethyst sits alongside the orange yellow of citrine in the form of one gem.   Ametrine is believed to have been discovered by a Spanish conquistador in Bolivia in the 17th Century.  After its discovery the Anahi mine was lost for three centuries until its rediscovery in the 1960’s.  This mine remains the world’s only commercial source for ametrine. " /> </a>
</li>
<li>
<a href="https://www.marketsquarejewelers.com/collections/andalusite"> <img src="//cdn.shopify.com/s/files/1/1401/8791/files/andalusite-slide_1024x1024.jpg?v=1533151243" alt=" Gem quality andalusite is pleochoric (displaying multiple colors when viewed at different angles).  Andalusite with a cross pattern is known as Chiastolite.   Found in Spain, Portugal, Brazil, and in its crystal form in the U.S.    Polymorph (same chemistry) with Kyanite and Sillimanite.  Used metaphysically for grounding and balance." /> </a>
</li>
<li>
<a href="https://www.marketsquarejewelers.com/collections/aquamarine"> <img src="//cdn.shopify.com/s/files/1/1401/8791/files/aqua-slide_1024x1024.jpg?v=1533151249" alt=" Aquamarine is the greenish blue to blue variety of the the mineral beryl.  Emerald is also a beryl gem, but is the blueish green to green variety.   Aquamarine is a clear gem that may be pale blue or quite rich in color in more expensive varieties.  Aquamarine may be distinguished from blue topaz by its light refraction (blue topaz has a double refraction)." /> </a>
</li>
<li>
<a href="https://www.marketsquarejewelers.com/collections/beryl"> <img src="//cdn.shopify.com/s/files/1/1401/8791/files/beryl-slide_1024x1024.jpg?v=1533151255" alt=" Pure beryl is colorless, although trace elements can cause different colors in the gem.  Certain colors of beryl are classified as their own gemstones such as aquamarine (blue), emerald (deep green), morganite (pink), and heliodor (yellow).  " /> </a>
</li>
<li>
<a href="https://www.marketsquarejewelers.com/collections/bloostone"> <img src="//cdn.shopify.com/s/files/1/1401/8791/files/bloodstone-slide_1024x1024.jpg?v=1533151262" alt=" Bloodstone, also known as heliotrope, is a form of chalcedony that is dark green with flecks of red.   The most desirable form of bloodstone is bright flecks of red against a dense, deep green background.  " /> </a>
</li>
<li>
<a href="https://www.marketsquarejewelers.com/collections/cameo"> <img src="//cdn.shopify.com/s/files/1/1401/8791/files/cameo-slide_1024x1024.jpg?v=1533151269" alt="Cameos have a raised carved design (designs carved below the surface of the stone are known as intaglio).  True shell cameos can be distinguished from mass produced imitations by their curved back and may have slight variations in coloring." /> </a></li>
  </ul>
</div>
<div id="carousel" class="flexslider">  
<ul class="slides">    
<li>
<img src="//cdn.shopify.com/s/files/1/1401/8791/files/agate-slide_1024x1024.jpg?v=1533151194" alt="Agate is a form of quartz that is often banded, but may also have distinctive inclusions, such as dendritic agate and moss agate. Can be any color of the rainbow, as well as black, white or gray.  Agate is translucent. Historically, agate used in commercial production was found in the Idar-Oberstein region of Germany.  Even after large agate deposits were found in Rio Grande de Sul in Brazil in the 1800’s, the stone was still sent to Germany for cutting by expert craftsmen.  Today, agate is sourced from all over the world, including western regions in the U.S." />
</li>
<li>
<img src="//cdn.shopify.com/s/files/1/1401/8791/files/alexandrite-slide_1024x1024.jpg?v=1533151213" alt="Alexandrite is part of the chrysoberyl family.  Natural alexandrite is rare, especially in sizes larger than 1 carat.  Synthetic alexandrite contains the same chemical and physical properties as its natural counterpart, but is grown in a lab.  " />
</li>
<li>
<img src="//cdn.shopify.com/s/files/1/1401/8791/files/amber-slide_1024x1024.jpg?v=1533151220" alt="Amber is a copal resin that is at least million years old.  It may be opaque yellow (butterscotch amber), green, bone white, black, brown, or the common orange hue. " />
</li>
<li>
<img src="//cdn.shopify.com/s/files/1/1401/8791/files/amethyst-slide_1024x1024.jpg?v=1533151229" alt=" Once as expensive as rubies and emeralds, the discovery of large amethyst deposits in Brazil soon allowed for the gem’s mass appeal.  Amethyst has long been believed to hold special powers, from preventing intoxication (amethystos translates to “not drunk” in Ancient Greek), to quickening intelligence (per 15th Century astrologer Camillo Leonardi), to relieving stress according to holistic medicine." />
</li>
<li>
<img src="//cdn.shopify.com/s/files/1/1401/8791/files/ametrine-slide_1024x1024.jpg?v=1533151235" alt=" Ametrine combines the quartz varieties of amethyst and citrine. The purple of amethyst sits alongside the orange yellow of citrine in the form of one gem.   Ametrine is believed to have been discovered by a Spanish conquistador in Bolivia in the 17th Century.  After its discovery the Anahi mine was lost for three centuries until its rediscovery in the 1960’s.  This mine remains the world’s only commercial source for ametrine. " />
</li>
<li>
<img src="//cdn.shopify.com/s/files/1/1401/8791/files/andalusite-slide_1024x1024.jpg?v=1533151243" alt=" Gem quality andalusite is pleochoric (displaying multiple colors when viewed at different angles).  Andalusite with a cross pattern is known as Chiastolite.   Found in Spain, Portugal, Brazil, and in its crystal form in the U.S.    Polymorph (same chemistry) with Kyanite and Sillimanite.  Used metaphysically for grounding and balance." />
</li>
<li>
<img src="//cdn.shopify.com/s/files/1/1401/8791/files/aqua-slide_1024x1024.jpg?v=1533151249" alt=" Aquamarine is the greenish blue to blue variety of the the mineral beryl.  Emerald is also a beryl gem, but is the blueish green to green variety.   Aquamarine is a clear gem that may be pale blue or quite rich in color in more expensive varieties.  Aquamarine may be distinguished from blue topaz by its light refraction (blue topaz has a double refraction)." />
</li>
<li>
<img src="//cdn.shopify.com/s/files/1/1401/8791/files/beryl-slide_1024x1024.jpg?v=1533151255" alt=" Pure beryl is colorless, although trace elements can cause different colors in the gem.  Certain colors of beryl are classified as their own gemstones such as aquamarine (blue), emerald (deep green), morganite (pink), and heliodor (yellow).  " />
</li>
<li>
<img src="//cdn.shopify.com/s/files/1/1401/8791/files/bloodstone-slide_1024x1024.jpg?v=1533151262" alt=" Bloodstone, also known as heliotrope, is a form of chalcedony that is dark green with flecks of red.   The most desirable form of bloodstone is bright flecks of red against a dense, deep green background.  " />
</li>
<li>
<img src="//cdn.shopify.com/s/files/1/1401/8791/files/cameo-slide_1024x1024.jpg?v=1533151269" alt="Cameos have a raised carved design (designs carved below the surface of the stone are known as intaglio).  True shell cameos can be distinguished from mass produced imitations by their curved back and may have slight variations in coloring." />
</li>
  </ul>
</div>

Here are the files I have uploaded to assets: flexslider-icon.eot, flexslider-icon.svg, flexslider-icon.ttf, flexslider-icon.woff, flexslider-rtl-min.css, flexslider-rtl.css, flexslider.css, jquery.flexslider-min.js, jquery.flexslider.js

There are a lot of files in the setup folder, and it's not clear to me which ones have to be uploaded??  Is there something I'm missing?

For reference, this is the type of slider I'm trying to install.

0 Likes
New Member
4 0 0

@Amy26 I'm having the same issue as you noted in point #2 - font files not being read. Any luck in finding a solution?

0 Likes
New Member
4 0 0

@Amy26 found the solution...

Upload each of the FlexSlider fonts to the Assets folder (i.e. flexslider-icon.eot, flexslider-icon.svg, flexslider-icon.ttf, flexslider-icon.woff)

 

Here's the original FlexSlider font definition that will pose issues:

@font-face {
font-family: 'flexslider-icon';
src: url('fonts/flexslider-icon.eot');
src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
url('fonts/flexslider-icon.woff') format('woff'),
url('fonts/flexslider-icon.ttf') format('truetype'),
url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
font-weight: normal;
font-style: normal;
}

 

Here's the modified Flex-Slider font definition that will result in expected icon being displayed. The solution is the removal of "fonts/" from each instance.

Reason: When "fonts/" is included, it's stating that the icons reside within a folder titled: fonts. Well, there's no "fonts" folder since the files are loaded directly to Assets. 

@font-face {
font-family: 'flexslider-icon';
src: url('flexslider-icon.eot');
src: url('flexslider-icon.eot?#iefix') format('embedded-opentype'),
url('flexslider-icon.woff') format('woff'),
url('flexslider-icon.ttf') format('truetype'),
url('flexslider-icon.svg#flexslider-icon') format('svg');
font-weight: normal;
font-style: normal;
}

0 Likes
New Member
4 0 0

 here's the solution...

Step 1.) Upload the FlexSlider icon fonts to Assets

Step 2.) Modify the FlexSlider font-face code

 

Here's what the original FlexSlider code looks like:

@font-face {
font-family: 'flexslider-icon';
src: url('fonts/flexslider-icon.eot');
src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
url('fonts/flexslider-icon.woff') format('woff'),
url('fonts/flexslider-icon.ttf') format('truetype'),
url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
font-weight: normal;
font-style: normal;
}

 

Here's the modified FlexSlider code:

@font-face {
font-family: 'flexslider-icon';
src: url('flexslider-icon.eot');
src: url('flexslider-icon.eot?#iefix') format('embedded-opentype'),
url('flexslider-icon.woff') format('woff'),
url('flexslider-icon.ttf') format('truetype'),
url('flexslider-icon.svg#flexslider-icon') format('svg');
font-weight: normal;
font-style: normal;
}

 

SOLUTION

“fonts/“ has to be removed because the icon files reside within the root of the Assets folder and not a folder titled: fonts, as informed in the original code

0 Likes