WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Display number of images in carousel (19 posts)

  1. alin.ticlea
    Member
    Posted 10 months ago #

    Hello,

    I would like to ask you if anyone coded something like this in the carousel:
    Display the number if images currently in carousel by small consecutive circles on the bottom of the carousel. The circles should be click-able. When someone clicks on a specific circle the carousel jumps to the image associated with that circle.

    This will make the carousel one step closer to the best practices for carousel stated in this article:
    http://www.nngroup.com/articles/designing-effective-carousels/

    I can write the code for to implement this but first I want to check with you if it was not already done.

    If it was not done I will code it and share the code with the community.

    Thank you.

    Alin

  2. nikeo
    Member
    Theme Author

    Posted 10 months ago #

    Hey Alin,
    I don't think anyone did that yet! Yes share it!
    Cheers,
    Nicolas

  3. ElectricFeet
    Member
    Posted 10 months ago #

    Yay! Yes please!

  4. alin.ticlea
    Member
    Posted 9 months ago #

    Finally I got it working. Here is the dev site where I used the code:
    http://osansoft.com/lilotfruits/

    Here are the code changes:
    - under [your_site]/wp-content/themes/customizr/inc/css/[style_that_you_use].css
    add:

    .carousel-navigation  {
      top: 425px;
      left: 525px;
      position: absolute;
      z-index: 999;
      width: 230px;
    }
    
    .carousel-selection  {
      background: url('circle_grey.png') no-repeat;
      width: 32px;
      height: 32px;
      display: block;
      float: left;
    }
    
    .active {
      background: url('circle_blue.png') no-repeat;
    }

    - add in the same folder circle_grey.png and circle_blue.png. I got mine from: http://findicons.com/

    - under under [your_site]/wp-content/themes/customizr/parts/class-header-slider.php
    add:

    <?php
                      $count = 1;
                      $path = get_stylesheet_directory_uri();
                      foreach ( $slides as $s) {
                        $slide_object   = get_post( $s);
                        if (!isset ( $slide_object)) {
                          continue;
                        }
                        if ($count == 1) {
                          $html = "<a id=\"$count\" href=\"#customizr-slider\" data-slide-to=\"$count\" class=\"carousel-selection active\"></a>";
                        } else {
                          $html = "<a id=\"$count\" href=\"#customizr-slider\" data-slide-to=\"$count\" class=\"carousel-selection\"></a>";
                        }
                        echo $html;
                        $count ++;
                      }
                    ?>
                  </div>

    right after <div class="carousel-navigation">
    Also add:

    //click on button
                    $('.carousel-navigation > a').click(function(){
                      var item = Number($(this).attr('id'));
                      $('#customizr-slider').carousel(item - 1);
                      $('.carousel-navigation .active').removeClass('active');
                      var item = $('#customizr-slider .item.active').index();
                      $('.carousel-navigation a:eq('+ item + ')').addClass('active');
                      return false;
                    });
    
                    //change image on next/prev - before animation
                    $('#customizr-slider').bind('slid', function() {
                      $('.carousel-navigation .active').removeClass('active');
                      var idx = $('#customizr-slider .item.active').index();
                      $('.carousel-navigation a:eq(' + idx + ')').addClass('active');
                    });

    right after: $( '#customizr-slider' ).carousel(<?php echo $delay; ?>);

    I have not tested the code with more than 5 slides. I think it would be a good idea to add a limit of 5 images per slide in the theme, as per recommendation from the link from my initial post.

    If you find this code useful please feel free to incorporate it into the theme.

    Thank you.

    Alin

  5. Seahawksean
    Member
    Posted 7 months ago #

    What version of Customizr does this code work in? I'm still using ver3.0.8 for one of my sites as I don't want the huge hassle of redoing my header and footer after updating which I had to do with another site using this theme. I don't see the class "carousel-navigation" in ver3.0.8.

    Thanks

  6. rdellconsulting
    Member
    Posted 7 months ago #

    It didn't seem to make it into 3.1.*

    Now the code is stablilising, I'll see if a Snippet might help (though the base code is above)

  7. alin.ticlea
    Member
    Posted 7 months ago #

    I made that change on Customizr 3.0.9

    I intend to update the site that is using this theme to WP 3.8 and Customizr 3.1.5

    I will post the changes here in the first week of January.

  8. rdellconsulting
    Member
    Posted 7 months ago #

    Terrific, look forward to seeing it.

    Have a great Christmas/Holiday.

  9. Seahawksean
    Member
    Posted 7 months ago #

    @alin.ticlea, I too am using Customizr 3.0.9 but I don't see a .carousel-navigation class. What files did you find that code in? I don't see <div class="carousel-navigation"> in .class-header-slider.php file. Or am I missing something here?

    Thanx.

  10. etuttle
    Member
    Posted 6 months ago #

    I just backup and updated to 3.8 version of word press and the site looked like everything was still in its place, however the Display Buddy Carousel I use, pictures don't show up. The shortcode is still on the pages and post pages but not thing shows up.....Here is the site http://www.thinkmalone.com

  11. etuttle
    Member
    Posted 6 months ago #

    I just backup and updated to 3.8 version of word press and the site looked like everything was still in its place, however the Display Buddy Carousel I use, pictures don't show up. The shortcode is still on the pages and post pages but not thing shows up.....Here is the site http://www.thinkmalone.com

  12. ElectricFeet
    Member
    Posted 6 months ago #

    If the only thing that changed was your upgrade to WP 3.8, then it looks like your Display Buddy Carousel is not compatible with WP 3.8. I would contact the authors of Display Buddy Carousel for help.

  13. ElectricFeet
    Member
    Posted 6 months ago #

    p.s. If you need help with Customizr, please start a new thread. Your problem is not related to this thread.

  14. Seahawksean
    Member
    Posted 6 months ago #

    Correction: I'm using Customizr 3.0.9.

    @alin.ticlea, I don't see <div class="carousel-navigation"> in the parent version of class-header-slider.php. Did you add that div yourself?

  15. Seahawksean
    Member
    Posted 6 months ago #

    I was able to get this code working on my site and wanted to share some more specific information in case others want to take advantage of this neat code alin.ticlea developed.

    You will notice that the html code for the slider is located in two seperate areas of the class-header-slider.php file. The top is the html for the homepage and the second for blog posts. I placed alin.ticlea's code in both.

    <div class="carousel-navigation"> that alin.ticlea mentions above must be manually inserted into class-header-slider.php as it's not part of the original Customizr code.

    It does matter where this code is inserted in the file. I placed it just before the customizr-slider closing div tag ( </div> ) after '
    '.

    I originally tried to place it within <div class="carousel-inner"> which resulted in undesirable effects.

    Lastly, you will find '$( '#customizr-slider' ).carousel(<?php echo $delay; ?>)', which is mentioned above, at the bottom of class-header-slider.php. (Note that there is no ; ).

    I hope this helps others.

    Thanx alin.ticlea for this great piece of code.

  16. chappie
    Member
    Posted 6 months ago #

    @Seahawksean - thank you. Do you have a link to your working demonstration please?

  17. Seahawksean
    Member
    Posted 6 months ago #

    So sorry, I meant to include that.

    http://www.biologydesign.com/websites

  18. chappie
    Member
    Posted 6 months ago #

    Congratulations - looks great and I hope our great & good can make a Snippet out of it.

    And I love your design and typography. Wish I could ask you some questions about it....

  19. Seahawksean
    Member
    Posted 6 months ago #

    Sure @chappie. You can send me an email via my website http://www.biologydesign.com/contact

Reply

You must log in to post.

About this Theme

About this Topic