[Resolved] having an issue with flexslider

[Author]

Posts

[Fred]

I am trying to:
has you can see here flexslider does resize the thumbnail to main image size and thern resize it again
I visited this URL:
hidden link
I expected to see:
the thumbnail to stay same size during load
Instead, I got:
thumbnail resizing to same size than main image and then re sizing again to thumbnail css

[Waqas Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

I apologise for such an inconvenience. I suspect something related to the slider configuration and code. May I ask for the following information please?

- Provide some debug information about your site. Please see https://toolset.com/faq/provide-debug-information-faster-support/ for more information. I have enabled debug information area for your next reply.

- Share the configuration and code for your view. A full page screen shot of the view in edit mode will be helpful, as well as, the code used in the Loop Output section.

Please let me know if I can help you with anything related, thanks.

[Fred]

//// begin content template >> Single Template

<div id="designersbridalgown">
<div id="bridalgownsdesigner">
<div id="">
<p class="designer">[types field="designer" option="0" state="checked" id=""]<a href="/alitagraham/">Alita Graham</a><span class="present">available at</span>[/types][types field="designer" option="0" state="unchecked" id=""][/types][types field="designer" option="1" state="checked" id=""]<a href="/alvinavalenta/">Alvina Valenta</a><span class="present">available at</span>[/types][types field="designer" option="1" state="unchecked" id=""][/types][types field="designer" option="2" state="checked" id=""]<a href="/badgleymischka/">Badgley Mischka</a><span class="present">available at</span>[/types][types field="designer" option="2" state="unchecked" id=""][/types][types field="designer" option="3" state="checked" id=""]<a href="/denisbaso/">Dennis Basso</a><span class="present">available at</span>[/types][types field="designer" option="3" state="unchecked" id=""][/types][types field="designer" option="4" state="checked" id=""]<a href="/kathrynconover/">Kathryn Conover</a>[/types][types field="designer" option="4" state="unchecked" id=""][/types][types field="designer" option="5" state="checked" id=""]<a href="/maggiesottero/">Maggie Sottero</a><span class="present">available at</span>[/types][types field="designer" option="5" state="unchecked" id=""][/types][types field="designer" option="6" state="checked" id=""]<a href="/paulavarsalona/">Paula Varsalona</a>[/types][types field="designer" option="6" state="unchecked" id=""][/types][types field="designer" option="7" state="checked" id=""]<a href="/pninatornai/">Pnina Tornai</a><span class="present">available at</span>[/types][types field="designer" option="7" state="unchecked" id=""][/types][types field="designer" option="8" state="checked" id=""]<a href="/verawang/">Vera Wang</a><span class="present">available at</span>[/types][types field="designer" option="8" state="unchecked" id=""][/types][types field="designer" option="10" state="checked" id=""]<a href="/inesdisanto/">Ines Di Santo</a><span class="present">available at</span>[/types][types field="designer" option="10" state="unchecked" id=""][/types][types field="designer" option="11" state="checked" id=""]<a href="/carolinaherrera/">Carolina Herrera</a><span class="present">available at</span>[/types][types field="designer" option="11" state="unchecked" id=""][/types][types field="designer" option="12" state="checked" id=""]<a href="/nicolemiller/">Nicole Miller</a><span class="present">available at</span>[/types][types field="designer" option="12" state="unchecked" id=""][/types]</p>
<div id="sale">
[types field="bridal-store" option="0" state="checked" id=""]<span class="retail"><a href="/kleinfeldbridal/">Kleinfeld Bridal</a></span>[/types][types field="bridal-store" option="0" state="unchecked" id=""][/types][types field="bridal-store" option="1" state="checked" id=""]<span class="retail"><a href="/bridalreflections/">Bridal Reflections</a></span>[/types][types field="bridal-store" option="1" state="unchecked" id=""][/types][types field="bridal-store" option="2" state="checked" id=""]<span class="retail"><a href="/dorisfashions/">Doris Fashions</a></span>[/types][types field="bridal-store" option="2" state="unchecked" id=""][/types][types field="bridal-store" option="3" state="checked" id=""]<span class="retail"><a href="/monicasbridal/">Monica's Bridal</a></span>[/types][types field="bridal-store" option="3" state="unchecked" id=""][/types][types field="bridal-store" option="4" state="checked" id=""]<span class="retail"><a href="/lotusbridal/">Lotus Bridal</a></span>[/types][types field="bridal-store" option="4" state="unchecked" id=""][/types][types field="bridal-store" option="5" state="checked" id=""]<span class="retail"><a href="/nordstrom/">Nordstrom</a></span>[/types][types field="bridal-store" option="5" state="unchecked" id=""][/types][types field="bridal-store" option="6" state="checked" id=""]<span class="retail"><a href="/markingramatelier/">Mark Ingram Atelier</a></span>[/types][types field="bridal-store" option="6" state="unchecked" id=""][/types][types field="bridal-store" option="7" state="checked" id=""]<span class="retail"><a href="/weddingatelier/">Wedding Atelier</a></span>[/types][types field="bridal-store" option="7" state="unchecked" id=""][/types]  
</div>
<p class="gownname"><span id="gownname">[types field="gown-name" id=""][/types]</span></p></div>
<div id="skuprice"><span id="skuleft">SKU:</span> [wpv-if sku="wpcf-sku" evaluate="!empty($sku)"][types field="sku" class="" style=""][/types][/wpv-if][wpv-if sku="wpcf-sku" evaluate="empty($sku)"]call[/wpv-if]<span id="priceright">Price: $</span> [wpv-if price="wpcf-price" evaluate="!empty($price)"][types field="price" class="" style=""][/types][/wpv-if][wpv-if price="wpcf-price" evaluate="empty($price)"]call store[/wpv-if]</div>
<div id="bridalgownsdescription">
<span>Description: </span><br />[types field="description" id=""][/types]</div>
<div id="spec">
<ul>
<li><span>Neckline:  </span><span class="retail">[types field="neckline" separator=", " id=""][/types]</span></li>
<li>
<li><span>Waistline:  </span><span class="retail">[types field="waistline" separator=", " id=""][/types]</span></li>
<li>
<span>Sleeves: </span> 
<span class="retail">[types field="sleeves" option="0" state="checked" id=""]3/4 length sleeves[/types][types field="sleeves" option="0" state="unchecked" id=""][/types][types field="sleeves" option="1" state="checked" id=""]Long Sleeves[/types][types field="sleeves" option="1" state="unchecked" id=""][/types][types field="sleeves" option="2" state="checked" id=""]Sleeveless[/types][types field="sleeves" option="2" state="unchecked" id=""][/types][types field="sleeves" option="3" state="checked" id=""]Cap Sleeves[/types][types field="sleeves" option="3" state="unchecked" id=""][/types]</span>
</li>
  <li><span>Silhouette: </span><span class="retail">[types field="silhouette" separator=", " id=""][/types]</span></li>
<li>
<span>Strap: </span>
<span class="retail">[types field="strap" option="0" state="checked" id=""]Bell[/types][types field="strap" option="0" state="unchecked" id=""][/types][types field="strap" option="1" state="checked" id=""]Cap[/types][types field="strap" option="1" state="unchecked" id=""][/types][types field="strap" option="2" state="checked" id=""]Tank Straps[/types][types field="strap" option="2" state="unchecked" id=""][/types][types field="strap" option="3" state="checked" id=""]Strapless[/types][types field="strap" option="3" state="unchecked" id=""][/types][types field="strap" option="4" state="checked" id=""]Spaghetti Straps[/types][types field="strap" option="4" state="unchecked" id=""][/types][types field="strap" option="5" state="checked" id=""]Sheer[/types][types field="strap" option="5" state="unchecked" id=""][/types][types field="strap" option="6" state="checked" id=""]Puffed[/types][types field="strap" option="6" state="unchecked" id=""][/types][types field="strap" option="7" state="checked" id=""]Fitted[/types][types field="strap" option="7" state="unchecked" id=""][/types][types field="strap" option="8" state="checked" id=""]Detachable[/types][types field="strap" option="8" state="unchecked" id=""][/types]</span>
</li>
<li>
<span>Accents: </span>
<span class="retail">[types field="accents" option="0" state="checked" id=""]Beading[/types][types field="accents" option="0" state="unchecked" id=""][/types][types field="accents" option="1" state="checked" id=""]Feathers[/types][types field="accents" option="1" state="unchecked" id=""][/types][types field="accents" option="2" state="checked" id=""]Flowers[/types][types field="accents" option="2" state="unchecked" id=""][/types][types field="accents" option="3" state="checked" id=""]Jacket/Bolero[/types][types field="accents" option="3" state="unchecked" id=""][/types][types field="accents" option="4" state="checked" id=""]Ruffles[/types][types field="accents" option="4" state="unchecked" id=""][/types][types field="accents" option="5" state="checked" id=""]Sash/Belt[/types][types field="accents" option="5" state="unchecked" id=""][/types][types field="accents" option="6" state="checked" id=""]Tiers[/types][types field="accents" option="6" state="unchecked" id=""][/types]
</span></li>
<li><span>Style: </span><span class="retail">[types field="style" separator=", " id=""][/types]</span></li>
<li>
<span>Gown Length: </span><span class="retail">[types field="gownlength" separator=", " id=""][/types]</span></li>
<li>
<span>Fabrics: </span><span class="retail">[types field="fabrics" separator=", " id=""][/types]</span></li>
<li>
<span>Color: </span>
<span class="retail">[types field="color" separator=", " id=""][/types]</span></li>
 </ul>
</div>

<div id="socialshare">[sharethis]</div></div>
</div>
<div id="bridalgownthumbnail">
</div>
<div id="bridalgownimages">
<div id="bridalgownfeature">
<div id="slider" class="flexslider">
<ul class="slides">
[wpv-for-each field="wpcf-multiple-images"]
<li>[types field="multiple-images"][/types]</li>
[/wpv-for-each]
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
[wpv-for-each field="wpcf-multiple-images"]
<li>[types field="multiple-images" size='thumbnail'][/types]</li>
[/wpv-for-each] 
</ul>
</div>
</div>
</div> 
[WPCR_INSERT]

//// end content template >> Single Template

// flexslider 
jQuery(function(){
      SyntaxHighlighter.all();
    });
    jQuery(window).load(function(){
      jQuery('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 80,
        itemHeigth: 100,
        itemMargin: 3,
        asNavFor: '#slider'
      });
 
      jQuery('#slider').flexslider({
        animation: "slide",
        controlNav: true,
        animationLoop: false,
        slideshow: false,
        sync: "#carousel",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });


////  view-source:<em><u>hidden link</u></em>    

[Waqas Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for providing the details, but unfortunately I can not assess the configuration of the View and it's slider from the code of the content template only.

However, in the page source, it is generating thumbnails correctly and each thumbnail is being referenced to it's big counterpart appropriately. But the effect of big images you see during the load is due to the slow loading of the page.

CSS resizing of thumbnails is being done by the Flexslider at later time (i.e. when document is ready), due to slow loading. That is why it is taking time to produce the required effect.

However, please add following CSS to your theme, Content Template or View's CSS editor:

div#carousel li {
    width: 80px;
}

So it is applied before hand and will later be replaced by Flexslider itself.

[Fred]

perfect
thanks again

i didn t though it was css since it has already inline 80px

i still see a second execution of JS somewhere but it did the trick
hidden link
if you wait 2 sec after page load there is a small jump on image size
i ll review my js and jquery