Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm trying to build a slider exactly like this in wordpress. I have managed to make the slider work except the next/prev button. I need to get the next image title and the previous image title for the next/prev button. my code is like this:

 <script type="text/javascript" charset="UTF-8">

  var clist_autoplay = false;
  var ctemp_autoplay = clist_autoplay;

  jQuery(document).ready(function($) {        
    var larr = { 


<?php  //This is the desired value of Looping

$num=1;foreach ( $images as $attachment_id => $attachment ) {
    $image_img = wp_get_attachment_image_src( $attachment_id, 'large' );



      $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
  $image_title = $attachment->post_title;
$caption = $attachment->post_excerpt;
  $description = $attachment->post_content;     
?>
            "<?php echo $image_title ?>": {
            "0": "<?php echo  $image_img[0] ?>",
            "1": 600,
            "2": 400,
            "3": "<?php echo $image_title ?>",
            "4": "#",
            "5": "<?php echo $image_title ?>",
            "6": "",
            "7": "",
            "8": "",
            "9": "",
            "num": <?php  echo $num++; ?>,
            "slideTitle": "<?php echo $caption ?>",
            "slideContent": "<p><?php echo $description; ?></p>",
            "slideNum": null,
            "next": "<?php echo $image_title ?>",
            "prev": "<?php echo $image_title ?>"
        },
        <?php    
     }
}

endwhile;
?>

I can't get the "next": "<?php echo $image_title ?>", "prev": "<?php echo $image_title ?>" to work.

share|improve this question

1 Answer 1

up vote 1 down vote accepted

You are using an associative array of $attach_id => $attach_obj and loop through it. While there are methods to get the next and previous elements in this array, I would prefer to rely on continuous index array to get these objects. First convert the array:

$images = array_values($images);

Now loop through using the contineous index:

foreach ($images as $index => $attachment) {

Finally check for next and previous objects:

<?php if (isset($images[$index+1])) { ?>
    , "next": "<?php echo $images[$index+1]->post_title; ?>"
<?php } ?>
<?php if (isset($images[$index-1])) { ?>
    , "prev": "<?php echo $images[$index-1]->post_title; ?>"
<?php } ?>

Edit: here how your code might look like:

<script>
    var clist_autoplay = false;
    var ctemp_autoplay = clist_autoplay;
    jQuery(document).ready(function($) {        
        var larr = {
<?php
$num = 1;
$images = array_values($images);
foreach ($images as $key => $attachment) {
    $image_img = wp_get_attachment_image_src( $attachment->ID, 'large' );
    $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
    $image_title = $attachment->post_title;
    $caption = $attachment->post_excerpt;
    $description = $attachment->post_content;     
?>
            "<?php echo $image_title ?>": {
                "0": "<?php echo  $image_img[0] ?>",
                "1": 600,
                "2": 400,
                "3": "<?php echo $image_title ?>",
                "4": "#",
                "5": "<?php echo $image_title ?>",
                "6": "",
                "7": "",
                "8": "",
                "9": "",
                "num": <?php  echo $num++; ?>,
                "slideTitle": "<?php echo $caption ?>",
                "slideContent": "<p><?php echo $description; ?></p>",
                "slideNum": null
                <?php if (isset($images[$key+1])) { ?>
                    , "next": "<?php echo $images[$key+1]->post_title; ?>"
                <?php } ?>
                <?php if (isset($images[$key-1])) { ?>
                    , "prev": "<?php echo $images[$key-1]->post_title; ?>"
                <?php } ?>
                }
<?php } // end foreach ?>
    }
}
share|improve this answer
    
Hi, thanks for the answer, but I'm running into problems. goo.gl/OsMxe see the source here. the next prev button seemes to be coming like this: "next": "Busta", "next": "Morrissey", "prev": "Blacka", "next": "robbie", "prev": "Busta", "prev": "Morrissey" –  Samia Ruponti Dec 25 '12 at 19:35
    
here's the jsfiddle : jsfiddle.net/Snowbell92/9dBKs –  Samia Ruponti Dec 25 '12 at 19:43
    
@Snowbell92: 1. You need to numerically index the array $images = array_values($images), 2. You need to loop through the newly created array (replace the old one). Please see my updates for how that implemented on your code. –  Ahmad M Dec 26 '12 at 4:26

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.