jQuery cycle2 and JQuery Transit not working on first slide

Question

I am using jQuery transit to trying an add some css3 movement to my slides in my jQuery Cycle2 slideshow. I have managed to get all BUT the first slide to have the effect. See my code below.

Like I said, the first slide does not have the effect applied to it. I've got to the point now where I need to reach out! HELP!

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>   

<div id="home-slideshow" class="cycle-slideshow slide-animate"
        data-cycle-timeout="6000"
        data-cycle-speed="1000"
        data-cycle-slides="> div.home-slide-cont"
        data-cycle-fx="fade"
        data-cycle-pause-on-hover="true">

        <div class="home-slide-cont first-slide">
               <div class="full-slide" style="background-image: url('1_large.jpg')"></div>
               <span class="slide-title">
                <blockquote>Title One here</blockquote>
               </span><!-- end .full-width -->
        </div>

        <div class="home-slide-cont ">
            <div class="full-slide" style="background-image: url('2_large.jpg')"></div>
            <span class="slide-title">
                <blockquote>Title Two here</blockquote>
            </span><!-- end .full-width -->
        </div>

        <div class="home-slide-cont ">
            <div class="full-slide" style="background-image: url('3_large.jpg')"></div>
            <span class="slide-title">
                <blockquote>Title Three here</blockquote>
            </span><!-- end .full-width -->
        </div>                  

</div>



 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">
         $(document).ready(function() {
             $('#home-slideshow.slide-animate .first-slide div').transition({scale: 1.1}, 9000,'ease'); 

             $('#home-slideshow.slide-animate').on('cycle-after',function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag){
                $('#home-slideshow.slide-animate .cycle-slide-active div').transition({scale: 1.1}, 9000,'ease'); 
             });
        });
    </script> 

    <script type="text/javascript" src="/js/jquery.transit.min.js"></script>
    <script type="text/javascript" src="/js/jquery.cycle2.swipe.min.js"></script>
    <script type="text/javascript" src="/js/jquery.cycle2.min.js"></script>

Thanks for any help on this, massively appreciated.

PART 2

OK, so i have seen that the Google Maps API is causing a conflict, if i remove the api it works.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true&libraries=weather,panoramio,places,geometry,drawing&language="></script> <script type="text/javascript"> var EE_GMAPS = { version : "3.2.2", base_path : "http://www.domain.com/", act_path : "http://www.domain.com/?ACT=85", api_path : "http://www.domain.com/?ACT=86", } </script> <script type="text/javascript" src="http://www.domain.com/themes/third_party/gmaps/js/gmaps.min.js" ></script> 


<script type="text/javascript" src="/js/jquery.transit.min.js"></script>
<script type="text/javascript" src="/js/jquery.cycle2.min.js"></script> 
<script type="text/javascript" src="/js/jquery.cycle2.swipe.min.js"></script>

<script type="text/javascript">

     $(document).ready(function() {
        $('#home-slideshow.slide-animate .first-slide div').transition({
          scale: 1.1
        }, 9000, 'ease');
        $('#home-slideshow.slide-animate').on('cycle-before', function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
          $('#home-slideshow.slide-animate .cycle-slide-active div').css({
            scale: 1
          });
        });
        $('#home-slideshow.slide-animate').on('cycle-after', function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
          $('#home-slideshow.slide-animate .cycle-slide-active div').transition({
            scale: 1.1
          }, 9000, 'ease');
        });
      });


                </script>

are you still having trouble? I think your question is answered properly, and you became inactive lately. If you have further problems you can ask another question. For now you should close this question by accepting correct answer by ticking it as correct. You shouldn't leave your answered question open forever. It is attracting our precious time and is waste of time. — Kiran Shakya, Dec 11 '15 at 10:40

Kiran Shakya · Answer 1 · 2015-12-09T05:02:56.297

Is this what you asked for?

  $(document).ready(function() {
    $('#home-slideshow.slide-animate .first-slide div').transition({
      scale: 1.1
    }, 9000, 'ease');
    $('#home-slideshow.slide-animate').on('cycle-before', function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
      $('#home-slideshow.slide-animate .cycle-slide-active div').css({
        scale: 1
      });
    });
    $('#home-slideshow.slide-animate').on('cycle-after', function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
      $('#home-slideshow.slide-animate .cycle-slide-active div').transition({
        scale: 1.1
      }, 9000, 'ease');
    });
  });

.full-slide {
  width: 200px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true&libraries=weather,panoramio,places,geometry,drawing&language="></script> <script type="text/javascript"> var EE_GMAPS = { version : "3.2.2", base_path : "http://www.domain.com/", act_path : "http://www.domain.com/?ACT=85", api_path : "http://www.domain.com/?ACT=86", } </script> <script type="text/javascript" src="http://www.domain.com/themes/third_party/gmaps/js/gmaps.min.js" ></script>    <script src="http://ricostacruz.com/jquery.transit/jquery.transit.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.swipe.js"></script>

<div id="home-slideshow" class="cycle-slideshow slide-animate" data-cycle-timeout="6000" data-cycle-speed="1000" data-cycle-slides="> div.home-slide-cont" data-cycle-fx="fade" data-cycle-pause-on-hover="true">

  <div class="home-slide-cont first-slide">
    <div class="full-slide" style="background-image: url('http://malsup.github.io/images/p1.jpg')"></div>
    <span class="slide-title">
                <blockquote>Title One here</blockquote>
               </span>
    <!-- end .full-width -->
  </div>

  <div class="home-slide-cont ">
    <div class="full-slide" style="background-image: url('http://malsup.github.io/images/p2.jpg')"></div>
    <span class="slide-title">
                <blockquote>Title Two here</blockquote>
            </span>
    <!-- end .full-width -->
  </div>

  <div class="home-slide-cont ">
    <div class="full-slide" style="background-image: url('http://malsup.github.io/images/p3.jpg')"></div>
    <span class="slide-title">
                <blockquote>Title Three here</blockquote>
            </span>
    <!-- end .full-width -->
  </div>

</div>

Update

I have added your google api code to above answer. I found it working without any different behavior. I had a quick check at the console and found some errors and warnings instead, all related to your google api codes.

domain: why is there 'domain.com'?

Failed to load resource: the server responded with a status of 404 (Not Found) http://www.domain.com/themes/third_party/gmaps/js/gmaps.min.js

sensor: google api says it doesn't require sensor parameter.

SensorNotRequired: https://developers.google.com/maps/documentation/javascript/error-messages util.js:3

I can not say anything more unless you provide your exact faulty code.

The width of .full-slide is 100% and height 75vh. Would that still work? — Mark, Dec 06 '15 at 10:12
if you think your question above is covered in this answer, you should mark it as answered. how is it going @Mark? — Kiran Shakya, Dec 06 '15 at 10:31
Will need to have a look tomorrow when back in office. Cheers for help will update tomorrow — Mark, Dec 06 '15 at 10:32
Looks like it might be conflicting the Google Maps API, have updated my question above so you can see the code.. — Mark, Dec 07 '15 at 10:48
You must be doing something wrong yourself. I have updated the answer, and found no any problems except those mentioned above. — Kiran Shakya, Dec 09 '15 at 05:04

score 0 · Answer 2 · answered Dec 06 '15 at 10:19

Here's a working PEN: http://codepen.io/anon/pen/jWOdwK

Overall, your code seems to be correct, but I've noticed few things:

you're using a div with a background property as slide containers. This is a bad practice, since you lose the semantic and if the size of the containers are not specified the image will not show at all. Use the <img class="full-slide" src="yourimagepath.ext"> instead
You've included JQuery twice; one inclusion is enough, keep the one in the bottom;
Since you're using div as slide container (as I said on my first point), be sure that your full-slide class has width and height specified.

Best!

jQuery cycle2 and JQuery Transit not working on first slide

2 Answers2