SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru rashidr's Avatar
    Join Date
    Jun 2004
    Posts
    643
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need to play Slideshow in Galleria and jCarousel script

    I need to play slideshow in this script.

    http://sorgalla.com/jcarousel/

    I am tired but unable to find any solution.

    Please help me.

    My html code with main big is
    HTML Code:
    <div id="main_image"></div>

    My thumnails:
    HTML Code:
                <div class="scrollable">
                    <ul id="mycarousel" class="jcarousel-skin-tango">
                        <li class="active"><img src="images/1.jpg" /></li>    
                        <li><img src="images/2.jpg" alt=""  /></li>
                            <li><img src="images/3.jpg" alt=""  /></li>
                        <li><img src="images/4.jpg" alt=""  /></li>
                        <li><img src="images/5.jpg" alt=""  /></li>
                        <li><img src="images/6.jpg" alt=""  /></li>
                        <li><img src="images/7.jpg" alt=""  /></li>
                        <li><img src="images/8.jpg" alt=""  /></li>
                        <li><img src="images/9.jpg" alt=""  /></li>
                        <li><img src="images/10.jpg" alt=""  /></li>
                        <li><img src="images/11.jpg" alt=""  /></li>
                        <li><img src="images/12.jpg" alt=""  /></li>
                        <li><img src="images/13.jpg" alt=""  /></li>
                        <li><img src="images/14.jpg" alt=""  /></li>
                        <li><img src="images/15.jpg" alt=""  /></li>
                        <li><img src="images/16.jpg" alt=""  /></li>
                        <li><img src="images/17.jpg" alt=""  /></li>
                        <li><img src="images/18.jpg" alt=""  /></li>
                    </ul>
                </div>

    I need to play slideshow in main_image div with mycarousel ul thumbnail/

  2. #2
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This will work, but you need to have a large and a small image in your images folder for each of your links.

    <html>

    <head>

    <script type="text/JavaScript">
    <!--
    // list of large image attributes
    var P=new Array();
    P["a1"]={wide:200, high:200 }
    P["a2"]={wide:200, high:200 }
    //
    // expand images function
    function expand(obj)
    { var obj.name=indx;
    var newSrc=obj.src.replace("_sml","_lg");
    var build='<img src="'+newSrc+'" width="'+P[indx].wide+'" height="'+P[indx].high+'">';
    document.getElementById("mainImage").innerHTML=build;
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    body { font-family:arial; font-weight:normal; color:#000; background-color:#FFF; }
    #mainImage { position:absolute; top:100px; left:50px; width:400px; height:400px; text-align:center; border:1px solid #C0C0C0; }
    #imgList { position:absolute; top:100px; left:550px; width:150px; text-align:center; border:1px solid #C0C0C0; cursor: pointer; }
    #imgList p { margin-top:0px; margin-bottom:10px; }
    -->
    </style>
    </head>

    <body>

    <div id="mainImage">
    </div>
    <!-- end mainImage div -->
    <div id="imgList">
    <!-- need small (1_sml.jpg) and large (1_lg.jpg) images for this to work -->
    <p>
    <img name="a1" src="images/1_sml.jpg" alt="red image" onclick="expand(this)" width="100" height="100"></p>
    <p>
    <img name="a2" src="images/2_sml.jpg" alt="blue image" onclick="expand(this)" width="100" height="100"></div>
    <!-- end imgList div -->

    </body>

    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •