cycle2 plugin does not work when using api(). html

Asked

Viewed 256 times

0

When I mark in html it works normally, when I write in my jQuery sheet using the api (). html doesn’t work, I’m guessing it’s because of the date-written in the div, how I could make it work?

$(function(){    
     $('.bl6-conteudo').html([ 
         '<div class="cycle-slideshow"', 
         'data-cycle-fx="fade"', 
         'data-cycle-timeout="240000"', 
         'data-cycle-slides="> .dicas"', 
         'data-cycle-caption-plugin="caption2"', 
         'data-cycle-pager-template="">',
         '<div class="cycle-prev"></div>',
         '<div class="cycle-next"></div>',
         '<div class="cycle-caption"></div>',
         '<div class="bl6-d1 dicas"></div>',
         '<div class="bl6-d2 dicas"></div>',
         '<div class="bl6-d3 dicas"></div>',
         '<div class="bl6-d4 dicas"></div>',
         '<div class="bl6-d5 dicas"></div>',
         '<div class="bl6-d6 dicas"></div>',
         '</div>' 
     ].join(''));
})

I was able to solve this problem by making the call, on the sheet of my scripts, as @Luiztanure said and restarted @Fabriciomatte.

$( '.cycle-slideshow' ).cycle();

And in the HTML sheet I set the scripts this way:

<!-- jquery -->

// jquery library

                   <!-- Cycle2 -->
     <script src="js/jquery.cycle2.js"></script> // tem de ficar logo acima da chamada dependende

              <!--  Minha folha de scripts-->
 <script type="text/javascript" src="js/jquery.meu.js"></script> // cycle2 depende dessa folha , pois tem partes do arquivo carregando nessa folha

Only then was it possible to make the plug work right , when inserted via . html() straight into my script sheet (my.js).

It is necessary to be careful with the order of the calls.

@Pauloroberto There is really no problem any content insertion via Jquery/javascript, I only see advantages, even as a string, in fact besides being easier not found relevant contraindications. See when inspecting element that appears as if it were inserted directly into html, besides being easy to edit, and loading the page is fast too.

vlw ;)

javascript jquery

  • I believe it’s because Cycle checks the existence of .cycle-slideshow and initializes them before of your code that creates it. In this case you can call the $( '.cycle-slideshow' ).cycle(); manually as Luiz did in the fiddle of his answer. =]

  • Can you add more code? Where to initialize cicle()?

  • I’m trying to call but it’s not working, I’ll keep trying. Sergio cicle() initializes in the sheet I downloaded already ready that integrates the plugin, the rest is basically data- inside the div.

1 answer

3


I did a test here and it seems to be working normally, but it seems that you forgot something from navigation and maybe css.

See the test in jsFiddle:

and it seems to be missing that:

  '<div class=center>',
  '  <span class="prev"><a href=#><< Prev</a></span>',
  '  <span class="next" style="margin-left:20px"><a href=#>Next >></a></span>',
  '</div>',

  • it is worth mentioning that it is not a good idea to insert content, html, via javascript

  • there is no problem in inserting html content in javascript, incidentally it is in my opinion the best way to insert, but not in this way as string, you should create the elements

  • I realized that when accessing the site is a little slower to load the pages; however, only 2 seconds more than the content inserted directly into the html. What would be the best way to insert content into html, to be able to edit all pages at the same time?

  • Luiz, this slide is only with text. when I mark the html works normally, but when I put it as strings, it doesn’t. I am inserting all the shared content of the second pages of my site, sidebar, social media buttons etc... to make it easier to edit them and change them when necessary, using this method as strings in the . html(), and "something from navigation" are also as individual strings to make editing easier. $( '.Bl6-D1' ).html( '<a href="#" target="_Blank"> <p> text goes here</p></a>' );

  • @Thiago, 2 seconds is A LOT. creates a question that I put a better explanation. and no, it is not recommended to insert content via JS. but it’s common and everyone has had to... is to see each case and not exaggerate. Without seeing the code, makes it difficult, but I would bet that the problem is the order. you start the plugin before you insert the HTML

  • Luiz, 2 seconds is the total to appear all on the page, and almost everything can edit and change places via JS. Thank you so much for your willingness to help. I’m almost getting to a solution, after your reply and the other friends.

  • great @Thiago, then send the solution/problem! , and if you’re going to use a lot of stuff inserted via js, take a look at the compiled Engines templates like . echo or Dot.js

Show 2 more comments

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.