最新成员的滚动资料

Question

I have a file recent.php that shows recent 15 members who has joined my website. Since 15 is a big number, I wish to have a scrolling effect on the page so that all recent 15 profiles will keep scrolling. Then I came across SimplyScroll but here is the issue that I am facing. I downloaded the script and went through all the test files and I have understood how to do it if I have static images but dont know how to do it when there is a dynamic data that comes from database in form of html table (top 15 registered members and their profiles. Can someone help me where to make changes to get the scrolling effect? Here is the code of recent.php Thanks.

<?php
session_start()

include("connect/config.php");
if($_SESSION['gender123'])
{
    if($_SESSION['gender123']=='Male')
    {
     $gender="where gender='Female'";
    }
    else
    {
     $gender="where gender='Male'";     
    }       
}
$sql="select * from register $gender order by index_id DESC LIMIT 0,15";
$result=mysql_query($sql) or die(mysql_error());    
$abcdef=$_SESSION['userid'];
$select="select * from payments where pmatri_id='$abcdef' or pemail='$abcdef'";
$exe=mysql_query($select) or die(mysql_error());
$fetch123=mysql_fetch_array($exe);
?>


<table width="210px" align="left" cellpadding="0" cellspacing="0" border="0" class="text2">

    <tr valign="top">

        <?php while($fetch=mysql_fetch_array($result)) { ?>

        <td valign="top" align="left" height="55px" style="padding:1px; max-width:120px; min-width:120px;">
            <?php if($_SESSION[ 'userid']) { if($fetch123[ 'profile']-$fetch123[ 'r_profile']>0) { ?>
            <a href="memprofile.php?user_id=<?php echo $fetch['matri_id']; ?>">

                <?php if($fetch[ 'photo1_approve']=="No" ) { ?>
                <img src="images/No-Image-icon.png" height="100" width="90px" border="0" />
                <?php } else if($fetch[ 'photo1']=='' ) { ?>
                <img src="images/No-Image-icon.png" height="100" width="90px" border="0" />
                <?php } else if($fetch[ 'photo_protect']=='Yes' ) { ?>
                <img src="images/imagePassProtected.jpg" height="100" width="90px" border="0" />
                <?php } else { ?>
                <img src="photos/<?php echo $fetch['photo1']?>" height="100" width="90px" border="0" />
                <?php } ?>
                <br />
                <h3><?php echo $fetch['firstname']." ".$fetch['lastname']; ?></h3>
            </a>
         </td>
        <?php } ?>
    </tr>

</table>

Answer 1

It's the same thing. Whether it is in a table or outside of a table. It's always the same procedure.

 (function($) { $(function() { //on DOM ready $(".scroller").simplyScroll({ orientation: 'horizontal', auto: true, manualMode: 'loop', frameRate: 20, speed: 5 }); }); })(jQuery); 

 .simply-scroll-container { /* Container DIV - automatically generated */ position: relative; } .simply-scroll-clip { /* Clip DIV - automatically generated */ position: relative; overflow: hidden; } .simply-scroll-list { /* UL/OL/DIV - the element that simplyScroll is inited on */ overflow: hidden; margin: 0; padding: 0; list-style: none; } .simply-scroll-list li { padding: 0; margin: 0; list-style: none; } .simply-scroll-list li img { border: none; display: block; } .simply-scroll-btn { position: absolute; background-image: url(buttons.png); width: 42px; height: 44px; z-index: 3; cursor: pointer; } .simply-scroll-btn-left { left: 6px; bottom: 6px; background-position: 0 -44px; } .simply-scroll-btn-left.disabled { background-position: 0 0 !important; } .simply-scroll-btn-left:hover, .simply-scroll-btn-left:focus { background-position: 0 -88px; } .simply-scroll-btn-right { right: 6px; bottom: 6px; background-position: -84px -44px; } .simply-scroll-btn-right.disabled { background-position: -84px 0 !important; } .simply-scroll-btn-right:hover, .simply-scroll-btn-right:focus { background-position: -84px -88px; } .simply-scroll-btn-up { right: 6px; top: 6px; background-position: -126px -44px; } .simply-scroll-btn-up.disabled { background-position: -126px 0 !important; } .simply-scroll-btn-up:hover, .simply-scroll-btn-up:focus { background-position: -126px -88px; } .simply-scroll-btn-down { right: 6px; bottom: 6px; background-position: -42px -44px; } .simply-scroll-btn-down.disabled { background-position: -42px 0 !important; } .simply-scroll-btn-down:hover, .simply-scroll-btn-down:focus { background-position: -42px -88px; } .simply-scroll-btn-pause { right: 6px; bottom: 6px; background-position: -168px -44px; } .simply-scroll-btn-pause:hover, .simply-scroll-btn-pause:focus { background-position: -168px -88px; } .simply-scroll-btn-pause.active { background-position: -84px -44px; } .simply-scroll-btn-pause.active:hover, .simply-scroll-btn-pause.active:focus { background-position: -84px -88px; } /* Custom class modifications - override classees .simply-scroll is default */ .simply-scroll { /* Customisable base class for style override DIV */ width: 576px; height: 200px; margin-bottom: 1em; } .simply-scroll .simply-scroll-clip { width: 576px; height: 200px; } .simply-scroll .simply-scroll-list {} .simply-scroll .simply-scroll-list li { float: left; width: 290px; height: 200px; } .simply-scroll .simply-scroll-list li img {} .simply-scroll .simply-scroll-btn {} .simply-scroll .simply-scroll-btn-left {} .simply-scroll .simply-scroll-btn-left.disabled {} .simply-scroll .simply-scroll-btn-left:hover {} .simply-scroll .simply-scroll-btn-right {} .simply-scroll .simply-scroll-btn-right.disabled {} .simply-scroll .simply-scroll-btn-right:hover {} .simply-scroll .simply-scroll-btn-up {} .simply-scroll .simply-scroll-btn-up.disabled {} .simply-scroll .simply-scroll-btn-up:hover {} .simply-scroll .simply-scroll-btn-down {} .simply-scroll .simply-scroll-btn-down.disabled {} .simply-scroll .simply-scroll-btn-down:hover {} /* Vertical scroller example */ .vert { /* wider than clip to position buttons to side */ width: 340px; height: 400px; margin-bottom: 1.5em; } .vert .simply-scroll-clip { width: 290px; height: 400px; } .vert .simply-scroll-list {} .vert .simply-scroll-list li { width: 290px; height: 200px; } .vert .simply-scroll-list li img {} .vert .simply-scroll-btn {} .vert .simply-scroll-btn-up { /* modified btn pos */ right: 0; top: 0; } .vert .simply-scroll-btn-up.disabled {} .vert .simply-scroll-btn-up:hover {} .vert .simply-scroll-btn-down { /* modified btn pos */ right: 0; top: 52px; } .vert .simply-scroll-btn-down.disabled {} .vert .simply-scroll-btn-down:hover {} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://budowastrony.pl/images/jquery.simplyscroll.js"></script> <table> <tr> <td> <ul class="scroller"> <li> <img src="http://budowastrony.pl/images/img1.jpg" width="290" height="200"> </li> <li> <img src="http://budowastrony.pl/images/img2.jpg" width="290" height="200"> </li> <li> <img src="http://budowastrony.pl/images/img3.jpg" width="290" height="200"> </li> <li> <img src="http://budowastrony.pl/images/img4.jpg" width="290" height="200"> </li> <li> <img src="http://www.budowastrony.pl/images/img5.jpg" width="290" height="200"> </li> </ul> </td> </tr> <tr> <td> <ul class="scroller"> <li> <img src="http://budowastrony.pl/images/img1.jpg" width="290" height="200"> </li> <li> <img src="http://budowastrony.pl/images/img2.jpg" width="290" height="200"> </li> <li> <img src="http://budowastrony.pl/images/img3.jpg" width="290" height="200"> </li> <li> <img src="http://budowastrony.pl/images/img4.jpg" width="290" height="200"> </li> <li> <img src="http://www.budowastrony.pl/images/img5.jpg" width="290" height="200"> </li> </ul> </td> </tr> </table> <br /> <br /> <br /> <input type="text" value="" /> 

You might want to change from an id to a class when there are multiple rows you want to affect like I did in the example above. But the other things dont change.

I hope my example makes it clear how to work with it. If you really got multiple Slides it is important to change from id to class and do the same thing in your js code ( id="scroller" to class="scroller", $("#scroller") to $(".scroller") )