Question

I have a jquery text rotator that rotates text pulling from a database with PHP.
Here’s a diagram:

The text then has a more info button to the side that will go to the corresponding page to the event ( So if one of the rotations is “Example Event” then the more info button will go to event.php?id=6 if the row containing “Example Event”‘s id is 6. Unfortunately, the moreinfo.php buttons link always goes to the first rotation corresponding page ( so if the first rotation is “Example Event” and “Example Event” has the id 6, then the more info button will always stay linked to the page where id=6 even when its a different rotation like “A Better Event” which has an id=8.

Thanks for any help ( I know this my description is pretty confusing). Also, if you can tell what the problem is, can you explain your solution a little (I’m learning PHP and find looking at solutions to problems I have helps me learn a lot!)

                       <div id="rotate">
                        <?php
                          while ($row = mysql_fetch_assoc($result)) {
                            $id = $row['id'];
                          echo"
                            <font>
                                ".$row['tag']."
                            </font>";
                        }?>
                        </div>
                        </div>
                    <div class='grid_2'><a href='events.php?id=<?php echo $id;?>'><button id='eventinfo'>event info &raquo;</button></a></div>

and here is the rotate code:

<script type="text/javascript">
(function($){
$.fn.extend({ 
    //plugin name - rotaterator
    rotaterator: function(options) {

        var defaults = {
            fadeSpeed: 600,
            pauseSpeed: 100,
            child:null
        };

        var options = $.extend(defaults, options);

        return this.each(function() {
              var o =options;
              var obj = $(this);                
              var items = $(obj.children(), obj);
              items.each(function() {$(this).hide();})
              if(!o.child){var next = $(obj).children(':first');
              }else{var next = o.child;
              }
              $(next).fadeIn(o.fadeSpeed, function() {
                    $(next).delay(o.pauseSpeed).fadeOut(o.fadeSpeed, function() {
                        var next = $(this).next();
                        if (next.length == 0){
                                next = $(obj).children(':first');
                        }
                        $(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed});
                    })
                });
        });
    }
});
})(jQuery);

$(document).ready(function() {
    $('#rotate').rotaterator({fadeSpeed:1200, pauseSpeed:6000});
}); 

    </script>

Answer 1

When you make your rotate div, you can add hidden fields to each loop to save the id of each iteration.

<div id="rotate">
<?php
$index = 0;
while ($row = mysql_fetch_assoc($result)) {
  $id = $row['id'];
  echo "<font>".$row['tag']."</font>";
  echo "<input type='hidden' id='rotate_".$index."' value='$id' />";
  $index++;
}?>
</div>

Then you can maintain an index in javascript to correspond with the index I made above, and when you rotate the text, do

var newLinkID = $('#rotate_' + index).val();
$('.grid_2 a').attr('href', 'events.php?id=' + newLinkID);