SitePoint Sponsor

User Tag List

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

    Need to play Slideshow in Galleria and jCarousel script

    I need to play slideshow in this script.

    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>

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

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    2 Post(s)
    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.



    <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;
    var newSrc=obj.src.replace("_sml","_lg");
    var build='<img src="'+newSrc+'" width="'+P[indx].wide+'" height="'+P[indx].high+'">';
    <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; }


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




Posting Permissions

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