dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Flexslider inside FancyBox issue

  1. #1
    Join Date
    Sep 2012
    Posts
    6

    Flexslider inside FancyBox issue

    Trying to load a thumbnail Flexslider inside Fancybox. I have everything working for most part, but I have two issues.

    • Thumbnail images disappear every two times a Fancybox is opened
    • Thumbnails don't work on the 10th list item. Think that has something to do with
      Code:
      substr


    Here's a link to staging site for reference: http://rga.pleaseproof.com/work/studies/

    Here's HTML (note, brackets are ExpressionEngine markup):

    HTML Code:
    <?php $i = 1; ?>     
    
    {exp:channel:entries}
        {studies_projects}
            <div class="col-sm-6 col-md-4 col-lg-3 col-xs-12 project-content-block">
                <div class="project-box ">
                    <img src="{image}" alt="{cat_name} category image">
                    <h3>{cat_name}</h3>
                </div>
                <ul>
                    {playa_projects var_prefix="playafield"}
                        <?php $count = $i++; ?>
                        <li><a class="fancybox" rel="inline-<?php echo $count; ?>" href="#inline-<?php echo $count; ?>" title="{playafield:studies_caption}">{playafield:title}</a></li>
                        <div id="inline-<?php echo $count; ?>" style="display:none;">
                            <div id="slider<?php echo $count; ?>" class="flexslider slider-js">
                                <div class="flex-heading">
                                    <div class="col-md-6">
                                        <h2>{playafield:project_name}</h2>
                                    </div>
                                    {playafield:studies_outline_block var_prefix="nested_matrix"}
                                        {if nested_matrix:content_1}
                                            <div class="col-md-2 project-name">
                                                <h3>Project Size</h3>
                                                {nested_matrix:content_1}
                                            </div>
                                        {/if}
                                        {if nested_matrix:content_2}
                                            <div class="col-md-2 project-name">
                                                <h3>Project Cost</h3>
                                                {nested_matrix:content_2}
                                            </div>
                                        {/if}
                                        {if nested_matrix:content_3}
                                            <div class="col-md-2 project-name">
                                                <h3>Project Use</h3>
                                                {nested_matrix:content_3}
                                            </div>
                                        {/if}
                                    {/playafield:studies_outline_block}
                                </div>
                                <ul class="slides">
                                    {playafield:studies_image_gallery}
                                        <li><img src="{playafield:url}" /></li>
                                    {/playafield:studies_image_gallery}
                                </ul>
                            </div>
                            <div id="carousel<?php echo $count; ?>" class="flexslider carousel-js">
                                <ul class="slides">
                                    {playafield:studies_image_gallery}
                                        <li><img src="{playafield:url}" /></li>
                                    {/playafield:studies_image_gallery}
                                </ul>
                            </div>
                        </div>
                    {/playa_projects}
                </ul>
            </div>
        {/studies_projects}
    {/exp:channel:entries}
    Here's JS:

    Code:
    jQuery(document).ready(function() {         
          
        jQuery('.fancybox').fancybox({
            width     : 800,
            height    : 800,
            autoSize   : false,
            autoHeight : true,
            autoResize  : true,
            scrollOutside  : true,
            aspectRatio : false,
            maxWidth  : '90%',
            fitToView    : false,
            scrolling : 'auto',
            prevText: "",
            nextText: "",
            helpers:  {
                title : {
                    type : 'inside'
                }
            },
    
            beforeShow:function(el){
    
                $(".carousel-js").each(function() {
                    var id = this.id;
                    var subNav = id.substr(-1);
    
                    jQuery('#' + id).flexslider({
                        animation: "slide",
                        controlNav: false,
                        animationLoop: false,
                        slideshow: false,
                        itemWidth: 210,
                        itemMargin: 5,
                        prevText: "",
                        nextText: "",
                        asNavFor: '#slider' + subNav
                        //move: 2,
                        //startAt: 0,
                    });
                });
    
                $(".slider-js").each(function() {
                    var id = this.id;
                    var carousel = id.substr(-1);
    
                    jQuery('#' + id).flexslider({
                        animation: "fade",
                        controlNav: false,
                        animationLoop: false,
                        slideshow: false,
                        prevText: "",
                        nextText: "",
                        sync: "#carousel" + carousel,
                        //startAt: 0,
                        start: function(slider){
                          $('body').removeClass('loading');
                        }
                    });
                });
    
                //jQuery.fancybox.inner.resize();
                setTimeout(function(){
                    jQuery.fancybox.reposition();
                    jQuery.fancybox.inner.resize(); 
                },300); 
            }
    
        });     
            
    });
    Any idea what the issue is?
    Last edited by frshjb373; 01-20-2016 at 10:10 AM.

  2. #2
    Join Date
    Sep 2007
    Posts
    389
    I tried this code:
    Code:
      
    <!DOCTYPE html>
    <html>
    <body>
    
    <p>Click the button </p>
    
    <button onclick="myFunction()">Try it</button>
    
    <p id="demo"></p>
    
    <script>
    //http://www.w3schools.com/jsref/jsref_substr.asp
    //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr
    
    //http://www.w3schools.com/jsref/jsref_indexof.asp
    
    //http://www.w3schools.com/jsref/jsref_lastindexof.asp
    
    //http://www.w3schools.com/jsref/jsref_match.asp
    
    function myFunction() {
    
        var str = "slider11"; 
    	var no =str.indexOf(str.match(/\d/,"g"));
    	alert(no);//6
        var res = str.substr(no);
       alert(res); // 11
        document.getElementById("demo").innerHTML = res;
    }
    </script>
         
       </body>
    </html>
    The code is working firefox 39.0, chrome 47, internet explorer 11.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles