Results 1 to 4 of 4

Thread: Help adding images to Carousel Slideshow 1

  1. #1
    Join Date
    Sep 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help adding images to Carousel Slideshow 1

    1) Script Title: Carousel Slideshow 1

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/carousel.htm

    3) Describe problem: I have the script working but can't add any additional images. I know they have to go in the Car_Image_Sources=new Array but every time I add more images I get a blank carousel. Can anyone tell me what to do?

    Thanks

    Webpage - http://www.jesustogs.com/test.html

    Script as I have it:
    <script type="text/javascript">

    /***********************************************
    * Carousel Slideshow script- Ger Versluis 2003
    * Permission granted to DynamicDrive.com to feature script
    * This notice must stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    /********************************************************
    Create a div with transparent place holder in your html
    <div id="Carousel" style="position:relative"><img src="http://www.jesustogs.com/images/placeholder.gif" width="340.80" height="242">

    </div>
    placeholder width:
    4 sided: 1.42 * carousel image width + 3
    6 sided: 2 * carousel image width +4
    8 sided: 2.62 * carousel image width + 5
    12 sided: 3.87 * carousel image width + 7
    placeholder height:
    carousel image height+2

    Insert onload in body tag
    <body onload="Carousel()">
    *********************************************************/

    // 7 variables to control behavior
    var Car_Image_Width=240;
    var Car_Image_Height=240;
    var Car_Border=true; // true or false
    var Car_Border_Color="white";
    var Car_Speed=3;
    var Car_Direction=true; // true or false
    var Car_NoOfSides=4; // must be 4, 6, 8 or 12

    /* array to specify images and optional links.
    For 4 sided carousel specify at least 2 images
    For 6 sided carousel specify at least 3
    For 8 sided carousel specify at least 4
    For 12 sided carousel specify at least 6
    If Link is not needed keep it ""
    */
    Car_Image_Sources=new Array(
    "http://images.cafepress.com/product/71993953v3_240x240_Front.jpg","http://www.cafepress.com/jesustogs.71993953",
    "http://images.cafepress.com/product/71993472v1_240x240_Front_Color-BabyBlue.jpg","http://www.cafepress.com/jesustogs.71993472",
    "http://images.cafepress.com/product/71993315v1_240x240_Front.jpg","http://www.cafepress.com/jesustogs.71993315",
    "http://images.cafepress.com/product/74469384v1_240x240_Front.jpg","http://www.cafepress.com/jesustogs.74469384" // NOTE No comma after last line
    );


    /***************** DO NOT EDIT BELOW **********************************/
    CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
    C_Coef=new Array(
    3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
    Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
    var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
    C_Pre_Img=new Array(Car_Image_Sources.length);
    var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
    C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

    function Carousel(){
    if(document.getElementById){
    for(i=0;i<Car_Image_Sources.length;i+=2){
    C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
    C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
    Car_Div=document.getElementById("Carousel");
    for(i=0;i<C_HalfNo;i++){
    CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);
    CW_I[i].style.position="absolute";
    CW_I[i].style.top=0+"px";
    CW_I[i].style.height=Car_Image_Height+"px";
    if(Car_Border){
    CW_I[i].style.borderStyle="solid";
    CW_I[i].style.borderWidth=1+"px";
    CW_I[i].style.borderColor=Car_Border_Color}
    CW_I[i].src=Car_Image_Sources[2*i];
    CW_I[i].lnk=Car_Image_Sources[2*i+1];
    CW_I[i].onclick=C_LdLnk;
    CW_I[i].onmouseover=C_Stp;
    CW_I[i].onmouseout=C_Rstrt}
    CarImages()}}

    function CarImages(){
    if(!C_Stppd){
    C_TotalW=0;
    for(i=0;i<C_HalfNo;i++){
    C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
    C_TotalW+=C_ClcW[i]}
    C_LeftOffset=(C_MaxW-C_TotalW)/2;
    for(i=0;i<C_HalfNo;i++){
    CW_I[i].style.left=C_LeftOffset+"px";
    CW_I[i].style.width=C_ClcW[i]+"px";
    C_LeftOffset+=C_ClcW[i]}
    C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
    if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
    if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
    if(Car_Direction){
    CW_I[C_HalfNo]=CW_I[0];
    for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
    CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
    CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
    else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
    CW_I[0]=CW_I[C_HalfNo];
    CW_I[0].src=Car_Image_Sources[C_CrImg];
    CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
    C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
    setTimeout("CarImages()",50)}

    function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
    function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
    function C_Rstrt(){C_Stppd=false}
    </script>

    <div id="Carousel" style="width:340.80px;margin:0 auto;position:relative">
    <img src="http://www.jesustogs.com/images/placeholder.gif" width="340.80" height="242">
    </div>

    <p><font face="Arial" size="-2">Free DHTML scripts provided by<br><a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p><div id="Carousel" style="position:relative">
    <img src="http://www.jesustogs.com/images/placeholder.gif" width="340.80" height="242">
    </div>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Your array of images works fine here. Did you follow all the other instructions on the demo page? Especially Step 3:

    Step 3: Finally, add the below onload event handler inside the <BODY> tag itself:
    Code:
    <body onload="Carousel()">
    Do you have other scripts on the page that may conflict?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yes, I did step 3. I know the images currently loaded work fine but if I add more images it stops working. Ideally, I'd like 40-50 images rotating. Thanks,

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There is no real limit on how many images you can have though practical considerations as to loading time do apply. 50 might be pushing it. Anyways, you just have to follow the template for the array. If you are adding more, make sure to have your comma's and quotes like in the example. Only the last line should have the comma omitted. The full array goes like so:

    Code:
    Car_Image_Sources=new Array(
    "image", "link",
    "image", "link",
    "image", "link",
    "image", "link",
    "image", "link",
    "image", "link",
    "image", "link",
    "image", "link",
    "image", "link",
    "image", "link",
    "image", "link",
    "image", "link",
    "image", "link",
    "image", "link"
    );
    If no link is desired, empty quotes must be used. We usually write out an array like so:

    Code:
    Car_Image_Sources=new Array();
    Car_Image_Sources[0]="image";
    Car_Image_Sources[1]="link";
    Car_Image_Sources[2]="image";
    Car_Image_Sources[3]="link";
    Car_Image_Sources[4]="image";
    Car_Image_Sources[5]="link";
    Car_Image_Sources[6]="image";
    Car_Image_Sources[7]="link";
    Car_Image_Sources[8]="image";
    Car_Image_Sources[9]="link";
    That might be easier for you. Another way is:

    Code:
    Car_Image_Sources=["image", "link", "image", "link", "image", "link", "image", "link", "image", "link", "image", "link", "image", "link", "image", "link", "image", "link", "image", "link", "image", "link", "image", "link"];
    However you write it out, the integrity of the array must be maintained, one break in that and the entire set of values is invalidated and usually the entire script ceases to function. You cannot have quotes within the quotes of an array entry either.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •