need major help creating 2 different img galleires

need major help creating 2 different img galleires

I'm trying to create two types of image galleries. The first I'm trying to make is an infinite loop gallery from files I upload that has additional l/r buttons. The other is on a separate page which would only have l/r buttons and would pop up when the user clicked on the thumbnail version of the image. I'm also having trouble figuring out thumbnails, but I'll ask that in a different post.

I know this is a bunch to ask, but I don't wanna use any plugins. I'd like to learn how it works so I can apply it to other things if I need to. I've been up the past couple of nights lookin at tutorials on Youtube, but I can't find anything that fits my style.

Anyway, this was as far as I was able to get with the two of them.
Please help! And thank you ahead of time for anyone who answers!


1. Infinite Loop L/R Gallery:

Viewable page
  1. <div class="navbtnl"></div>
    <div class="navbtnr"></div>
        <div id="charcrslbkgnd">
                <ul class="crslcnt">
                    <?php
                        $hero_id = heroes_id();
                       
                        $images = get_hero_images($hero_id);
                            if (empty($images)) {
                                echo 'There are no images in this file.';
                            } else {
                                foreach ($images as $image) {
                                    echo '<li><img class="char" src="heroes/', $image['hero_id'], '.', $image['ext'], '"
                                           target ="',$image['hero_id'], '"
                                           alt="image" >
                                           </li>
                                           ';
                                }
                            }
                    ?>
                </ul>
        </div>




















Css
  1. #charcrslbkgnd {
        width:90%;
        margin:auto;
        height:300px;
        background-color:#cccccc;
        border-radius:20px;
        margin-bottom:50px;
        z-index:3;
        overflow:hidden;
        overflow-x:scroll; (for testing purposes)
    }

    .crslcnt{
        position:relative;
        background:white;
        height:inherit;
        width:150%;
        z-index:1;
        overflow:visible;
    }

    .char {
        float:left;
        width:auto;
    }

    .navbtnl{
        position:absolute;
        margin-left:50px;
        width:30px;
        height:300px;
        background-color:#dddddd;
        float:left;
        border-radius:25px;
        opacity:0.7;
        z-index:5;
    }

    .navbtnr{
        position:absolute;
        margin-left:919px;
        width:30px;
        height:300px;
        background-color:#dddddd;
        float:right;
        border-radius:20px;
        opacity:0.7;
        z-index:5;
    }
















































Jquery
  1. $('.navbtnr').hover(function() {
        $('.navbtnr').css('opacity', '1');
        },function(){
        $('.navbtnr').css('opacity', '0.8');
    });

    $('.navbtnl').hover(function() {
        $('.navbtnl').css('opacity', '1');
        },function(){
        $('.navbtnl').css('opacity', '0.8');
    });


    $('.navbtnr').click(function() {
        $('.crslcnt').animate({'right': '+=200px'}, 500, 'linear');
    });


    $('.navbtnl').click(function() {
        $('.crslcnt').animate({'left': '+=200px'}, 500, 'linear');
    });


    // Not sure the rest of this begins right //
    var auto_slide = 1;
    var hover_pause = 1;
    var auto_heroslide_seconds = 2000;

        $('.crslcnt li:first').before($('.crslcnt li:last'));
            if (auto_slide == 1) {
                var timer = setInterval('slide("right")', auto_heroslide_seconds);
            }
        if (hover_pause == 1) {
            $('.crslcnt').hover(function() {
                clearInterval(timer);
            }, function () {
                timer = setInterval('slide("right")', auto_heroslide_seconds);
            });
        }

       
    function slider() {
       ?????????
    }











































The problems I have with this is that the of the <ul class="crslcnt"> width doesn't snap to the total width of the imgs uploaded and obviously that I have little idea where to begin with actually making it infinitely loop. Also, the buttons only kind of work.



2. L/R Image Viewing Gallery

Viewable page

  1. <?php
    $comic_id = $_GET['comic_id'];
    $comic_data = comic_data($comic_id, 'name', 'desc');
    $images = get_images($comic_id);
    ?>
    <div class="blackout"></div>

    <div class="view_comic">
        <div class="comic_close"></div>
            <div class="comic_navl" ></div>
            <div class="comic_navr"></div>
                <div class="comic_img">
                    <img src="">
                </div>
    </div>

    <?php
    echo '<p>', $comic_data['name'], '</p>';

    if (empty($images)) {
        echo 'There are no images in this file.';
    } else {
        foreach ($images as $image) {   //replace src with thumb uploads location
            echo '<div><img class="page" src="uploads/', $image['comic'], '/', $image['id'], '.', $image['ext'], '"
                              title="Uploaded ', date('D M Y / h:i:s', $image['timestamp']), '"
                              alt="image" >
                  </div>';
                if(admin_check() === true) {
                echo '[<a href="delete_image.php?image_id=', $image['id'],'">x</a>]';
                } else {
                }
        }
    }
    ?>

































Css

  1. .blackout{
        display:none;
        position:fixed;
        top:0;
        left:0;
        height:100%;
        width:100%;
        background:black;
        z-index:10;   
        opacity:0.8;
    }

    .view_comic{
        display:none;
        position:absolute;
        left:22.5%;
        height:830px;
        margin-top:-60px;
        width:55%;
        background:white;
        z-index:15;
    }

    .comic_navl{
        position:absolute;
        width:4.5%;
        height:inherit;
        background-color:#cccccc;
    }

    .comic_navr{
        width:4.5%;
        float:right;
        height:inherit;
        background-color:#cccccc;
        padding-bottom:-30px;
    }

    .comic_close{
        position:absolute;
        background:white;
        width:100%;
        height:30px;
        z-index:1;
    }

    .comic_img{
        width:90.65%;
        height:92.5%;
        margin:auto;
        margin-top:30px;
        border:2px solid black;
        z-index:5;
    }
























































Jquery
  1. $('.page').click(function() {
        $('.blackout').fadeTo(500, 0.8);
        $('.view_comic').fadeTo(500, 1);
    });

    $('.blackout').click(function() {
        $('.blackout').fadeOut(300);
        $('.view_comic').fadeOut(300);
    });








All I really need here is l/r sliding buttons to move to the next img in the gallery.

Thanks for at least reading all this, I know it was alot!