Menu icon Foundation
Interchance and Cycle2 Slideshow

First time user here. I'm using Interchange on a site, not within foundation framework. Functionally it's doing the job. It is retrieving the appropriate html for the small, medium, large as intended. So far so good.

The content in the medium html is a cycle slide show. (http://jquery.malsup.com/cycle2/). Initally I had trouble getting the slide show to work until I included the all the cycle2 js and jquery in the source html file. The slide show on source page works perfectly. http://c0999.paas2.tx.modxcloud.com/index.php?id=13

When the interchange brings in the slide show on this page, http://c0999.paas2.tx.modxcloud.com/index.php?id=10, the slideshow loads the first image but then all subsequent slides are not visible. I can see the code cycling through the slides. I did notice that one div is missing from the code inserted by interchange vs the code on the source page.


The sentinal div is used by cycle to set the dimensions of the slides.

I'm really excited about using Interchange on my project, but this has got me stumped.

Anyone have any ideas what's happening here?

Thank you!

Modxcycle2slideshowinterchange

First time user here. I'm using Interchange on a site, not within foundation framework. Functionally it's doing the job. It is retrieving the appropriate html for the small, medium, large as intended. So far so good.

The content in the medium html is a cycle slide show. (http://jquery.malsup.com/cycle2/). Initally I had trouble getting the slide show to work until I included the all the cycle2 js and jquery in the source html file. The slide show on source page works perfectly. http://c0999.paas2.tx.modxcloud.com/index.php?id=13

When the interchange brings in the slide show on this page, http://c0999.paas2.tx.modxcloud.com/index.php?id=10, the slideshow loads the first image but then all subsequent slides are not visible. I can see the code cycling through the slides. I did notice that one div is missing from the code inserted by interchange vs the code on the source page.


The sentinal div is used by cycle to set the dimensions of the slides.

I'm really excited about using Interchange on my project, but this has got me stumped.

Anyone have any ideas what's happening here?

Thank you!

Alexander Assimidis over 5 years ago

Could you please post your HTML & JS Source Code for further information

Terry Barth over 5 years ago

Sorry about that. I thought links to the pages would suffice. Thanks for taking a look.

Medium HTML

Note: the code for the individual slides are generated by a script in my CMS. This reflects the generated code on the page after the cms displays the page.

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>interchange</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/cycle-style.css" media="all" />
</head>
<body>
<style>.cycle-slide {max-width: 375px;}
</style>
  <div id="main">
  <p>Doc Id: 13 Templage: 18</p>
  <hr />

<div class="cycle-slideshow clearfix"
  data-cycle-fx=scrollHorz
  data-cycle-timeout=4000
  data-cycle-slides="> div"
>
    <div class="slide">
      <img src="assets/images/test-images/slide-03.jpg" data-cycle-title="" data-cycle-desc="">
      <div class="captions">
        <div class="line1"></div>
        <div><span></span> 
        </div>
      </div><!--captions-->
    </div id="slide">
    <div class="slide">
      <img src="assets/images/test-images/slide-04.jpg" data-cycle-title="" data-cycle-desc="">
      <div class="captions">
        <div class="line1"></div>
        <div><span></span> 
        </div>
      </div><!--captions-->
    </div id="slide">
    <div class="slide">
      <img src="assets/images/test-images/slide-07.jpg" data-cycle-title="" data-cycle-desc="">
      <div class="captions">
        <div class="line1"></div>
        <div><span></span> 
        </div>
      </div><!--captions-->
    </div id="slide">
    <div class="slide">
      <img src="assets/images/test-images/slide-08.jpg" data-cycle-title="" data-cycle-desc="">
      <div class="captions">
        <div class="line1"></div>
        <div><span></span> 
        </div>
      </div><!--captions-->
    </div id="slide">
</div><!--cycle-slideshow-->
  </div> <!-- #main -->
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</body>
</html>

The page with interchange.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation 5's Interchange Demos  | Welcome</title>
    <link rel="stylesheet" href="assets/foundation/css/foundation.css" />
<!--  <link rel="stylesheet" type="text/css" href="assets/css/carousel-style---.css" media="all" />
  <link rel="stylesheet" type="text/css" href="assets/css/cycle-style.css" media="all" />-->
  </head>
  <body>
    <div class="row">
      <div class="large-12 columns">
        <h1>Foundation 5's Interchange Demos</h1>
      </div>
    </div>
    <hr>
    <div class="row">
      <div class="large-12 columns">

  <div id="swap" data-interchange="[http://c0999.paas2.tx.modxcloud.com/index.php?id=12, (small)], [http://c0999.paas2.tx.modxcloud.com/index.php?id=13, (medium)],[assets/foundation/maps/large--.html, (large)]">
        <div data-alert class="alert-box secondary radius">
    This is the default content.
    <a href="#" class="close">&times;</a>
  </div>
      </div>

<!--
    <hr>

    <h3>Interchange for Images Example</h3>
    <img data-interchange="[assets/foundation/img/space-small.jpg, (small)], [assets/foundation/img/space-medium.jpg, (medium)], [assets/foundation/img/space-large.jpg, (large)]">
-->
      </div>
    </div>

<script src="assets/foundation/js/modernizr.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="assets/foundation/js/foundation.min.js"></script>

<script src="assets/js/jquery.cycle2.min.js"></script>

<!--    <script>
      $(document).foundation();
    </script>  -->

<script>
      $(document).foundation();
      $("#swap").on("replace", function() {
$(document).foundation();
});
    </script>
  </body>
</html>

Alexander Assimidis over 5 years ago

First of all did u put his in your HTML

</div id="slide">

Second your Site is not loading not even the first Image or any other thing.

Please try to bind jquery locally on your Server into ur HTML File i've tested it and it works fine.

Terry Barth over 5 years ago

Well that little bit of code is embarrassing. I have corrected that.

As for my site not loading, very odd. I didn't realize that was happening. It loads for me in FF. Now I realize it's not loading in IE or Chrome. it just shows 2014.

I'll have to reconfigure how I set this up.

I'll be back. Thanks for hanging in there with me.

Terry

Neil Little over 5 years ago

Any luck on this?