Slideshow

• sleepydada

• July 23, 2013 at 7:06 am

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&#8221; /></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&#8221; /></a>
<a id=”next” href=”#”><img src=”http://localhost:8888/underdonk/wp-content/themes/underdonk/images/next.jpg&#8221; /></a>
</div><!–.slidemargin –>

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

Please lead me to the right direction.

Thank you.

Jaeeun

• emcniece

• July 23, 2013 at 9:53 am

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

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

• sleepydada

• July 23, 2013 at 11:46 am

But the name of the sub field is ‘image’

• Elliot

• July 23, 2013 at 1:07 pm

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

• sleepydada

• July 25, 2013 at 5:20 am

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;
  });

• emcniece

• July 25, 2013 at 5:36 am

Are there any Javascript errors in your browser console? (usually found by pressing F12 and navigating to “Console” tab)

• sleepydada

• July 25, 2013 at 5:46 am

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);

• sleepydada

• July 25, 2013 at 5:50 am

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

Thanks a lot for your help.

• emcniece

• July 25, 2013 at 5:55 am

Process of elimination 😉

Cheers!