Support

Account

Home Forums Add-ons Repeater Field Slideshow

Solved

Slideshow

  • Hi,

    I’m trying to created a show using a repeater field.

    I’ve succeeded showing only the first row image from the repeater field, I want a slider to pop up if I click on it. At the moment if I click on it the slider does pop up, but there are no images showing up. This is my code;`<div id=”slide-window”>
    <?php if(get_field('gallery')): ?>

    <div class=”slidemargin”>

    <a href=”#” id=”close”><img src=”http://localhost:8888/underdonk/wp-content/themes/underdonk/images/close.jpg” /></a>
    <ul id=”slider”>

    <?php while(has_sub_field('image')): ?>

    <li><div class=”slide-image”><img src=”<?php the_sub_field('image'); ?>”alt=””/></div>, <div class=”slide-info”><?php the_sub_field('title'); ?></div></li>

    <?php endwhile;?>

    </ul>
    <a id=”prev” href=”#”><img src=”http://localhost:8888/underdonk/wp-content/themes/underdonk/images/prev.jpg” /></a>
    <a id=”next” href=”#”><img src=”http://localhost:8888/underdonk/wp-content/themes/underdonk/images/next.jpg” /></a>
    </div><!–.slidemargin –>

    <?php endif; ?>
    </div><!–#slide-window –>`

    Please lead me to the right direction.

    Thank you.

    Jaeeun

  • <?php while(has_sub_field('image')): ?>

    Should that be <?php while(has_sub_field('gallery')): ?> instead?

  • But the name of the sub field is ‘image’

  • Hi @sleepydada

    Please read over the documentation of the has_sub_field function.

    You should pass the repeater or flexible content field name, not the sub field name

  • SO, I changed my code to this;

    <div id="slide-window">
    	<?php if(get_field('gallery')): ?>
        
    		<div class="slidemargin">
    			
    		<a href="#" id="close"><img src="http://localhost:8888/underdonk/wp-content/themes/underdonk/images/close.jpg" /></a>         
            <ul id="slider">
                   
                   <?php while(has_sub_field('gallery')): ?>
                   
            <li><div class="slide-image"><img src="<?php the_sub_field('image'); ?>"alt=""/></div>, <div class="slide-info"><?php the_sub_field('title'); ?></div></li>
    
           			<?php endwhile;?>
                   
            </ul>
            <a id="prev" href="#"><img src="http://localhost:8888/underdonk/wp-content/themes/underdonk/images/prev.jpg" /></a>
    		<a id="next" href="#"><img src="http://localhost:8888/underdonk/wp-content/themes/underdonk/images/next.jpg" /></a>
    		</div><!--.slidemargin -->
    		
    		<?php endif; ?>
    </div><!--#slide-window -->

    And now the images pop up, but they are overlapped on each other, and when I click the next or prev button nothing happens. This is my java code in case;

     $bx('#prev').click(function(){
        slider.goToPreviousSlide();
        return false;
      });
    
      $bx('#next').click(function(){
        slider.goToNextSlide();
        return false;
      });
  • Are there any Javascript errors in your browser console? (usually found by pressing F12 and navigating to “Console” tab)

  • Yes, Chrome says:

    Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8888/lib/jquery.bxslider.css

    Uncaught TypeError: Object #<Object> has no method ‘on’ jquery.bxslidercustom.js?ver=3.5.2:5

    I put the css code in my style.css instead of calling jquery.bxslider.css

    jquery.bxslidercustom.js is the java file for that I created to produce the pop up slider effect. Line 5 of it is;
    $rs(window).on('resize', doResize);

  • Oh I deleted line 5 and now it works! Hmmm.

    Thanks a lot for your help.

  • Process of elimination 😉

    Cheers!

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Slideshow’ is closed to new replies.