Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 6 of 8 FirstFirst ... 45678 LastLast
Results 76 to 90 of 118
  1. #76
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    harry, i want to start by saying the code looks great.

    i was hoping someone could help me out. i am new to the site and to html, in general, but i got carousel 2 to work from www.dynamicdrive.com . it looks fantastic.

    the question i have is how do i get the vertical carousel to be centered in the middle of the page? as of now, it's aligned left. when i add code to center it, it actually centers the left edge of the carousel causing the visual to be very heavy to the right side of the screen - or it cuts off half the image altogether.

    i'm a fifth grade teacher looking to set up a classroom page with a slideshow of pics.

    any information would be very greatly appreciated!

  2. #77
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Input carousel instead of images

    Hi folks. First let me say, great script Harry. I have a really cool project that I’d like to implement it into but it’s going to take some serious rewriting. Instead of images I’d like to have inputs (readonly with background-images). I’m thinking I’ll probably need 5 carousels with 8-12 inputs each. Once an input is clicked I’m going to have it stop (easy change there) and the value of each is passed to another field like so: carousel1’s value + carousel2’s value + etc. = the value of a hidden field… when all 5 characters are selected the form will be submitted. The submitted (collective) value is a password… the 5 carousels are the dials on a cryptex like the one in the Da Vinci Code. Cool concept huh? Any idea how to modify the script for inputs instead of images? I’m going to take a whack at it; I’ll come back and post it if I figure it out. Thanks again for the script; it looks like a promising launch pad for my project.
    Last edited by bustya; 05-23-2007 at 09:20 PM. Reason: adding link

  3. #78
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    PS: to the admin... the quick reply edit didnt work, I had to "go advanced" to edit.

  4. #79
    New to the CF scene
    Join Date
    May 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excellent job Harry! This is a really wicked & cool script. I am using it here:

    www.dancehallcelebrities.com/2k7bashment to display flyers for parties

    On my wish list is when someone puts the mouse over the image, the image will get bigger/magnify so that they see a larger image and when they move it off, the carousel continue on its merry way.

    How superb that would be.

  5. #80
    New Coder
    Join Date
    Apr 2007
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is a quick hack, so it looks more realistic, as the size of the center image looks larger than the rest. Sadly it only works with square images, but could be easily changed to do otherwise

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html><head><title>Carousel Slideshow</title>
    <script type='text/javascript'>
    function carousel(params){
      if(!(params.width>0&&isFinite(params.width)))params.width=100;
      if(!(params.height>0&&isFinite(params.height)))params.height=100;
      if(!(params.sides>2&&isFinite(params.sides)))params.sides=4;
      if(!(params.steps>0&&params.steps<100&&isFinite(params.steps)))params.steps=20;
      if(!(params.speed>0&&isFinite(params.speed)))params.speed=8;
      if(!(params.image_border_width>=0&&isFinite(params.image_border_width)))params.image_border_width=0;
      if(isFinite(params.id)||!params.id)params.id='bad_id_given_'+Math.random();
      
      document.write("<div style='position:relative;' id='"+params.id.replace(/[\r\n\t ]+/g,'_')+"'></div>");
      var cdiv=document.getElementById(params.id.replace(/[\r\n\t ]+/g,'_'))
      cdiv.style.width=params.width+'px';
      cdiv.style.height=params.height+'px';
      cdiv.style.border=params.border;
      cdiv.style.position='relative';
      cdiv.title=params.id;
        
      var counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/params.speed)-5;
      interval=isNaN(interval)?200:interval;
      var img_position=[],images=[],img_dimension=[];
      var img_index=params.images.length+1,img_index_cap=2*params.images.length;
      var faces=Math.ceil(params.sides/2), dimension, direction;
    
      function init(){
        if(params.direction=="left" || params.direction=="right"){
          direction=params.direction;
          dimension="width";
          }
        else if(params.direction=="top" || params.direction=="bottom"){
          direction=params.direction;
          dimension="height";
          }
        else {
          direction="left";
          dimension="width";
          }      
        cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px';
        var img=new Image();
        img.style.position='absolute';
        img.style[direction]='10000px';
        img.style.width=params.width-2*params.image_border_width+'px';
        img.style.height=params.height-2*params.image_border_width+'px';
        img.style.border=(params.image_border_width||0)+'px solid '+params.image_border_color;
      
        for(var i=0;i<params.images.length;i++){
          images[i]=img.cloneNode(true);
          images[i].src=params.images[i];
          if(params.links&&params.links[i]&&params.links[i]!=''){
            images[i].onclick=new Function("window.location='"+params.links[i]+"'");
            images[i].style.cursor=document.all?'hand':'pointer';
            }
          if(params.titles&&params.titles[i]&&params.titles[i]!='')
            images[i].title=params.titles[i];
          images[i+params.images.length]=images[i];
          if(params.images.length==faces)
            images[i+2*params.images.length]=images[i];
          cdiv.appendChild(images[i]);
          }
      
        var face_size=params.size_mode=='image'?params[dimension]:params[dimension]*Math.sin(Math.PI/params.sides);
        var face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)/2-.5;
        var pi_piece=2*Math.PI/params.steps/params.sides;
        for(i=0;i<=params.steps*faces;i++){
          img_dimension[i]=face_size*Math.sin(pi_piece*i);
          img_position[i]=(i<params.steps*params.sides/2)?Math.floor(params[dimension]/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offset*Math.cos(pi_piece*i)-img_dimension[i]/2)+'px':'10000px';
          img_dimension[i]=img_dimension[i]-2*params.image_border_width>1?Math.ceil(img_dimension[i])-2*params.image_border_width+'px':'1px';
          }
        }
      init();
    
      cdiv.rotate = function(){
        setTimeout('document.getElementById("'+cdiv.id+'").rotate()',interval);
        if(!spinning) return;
        if(++counter>=params.steps){
          counter=0;
          if(++img_index>=img_index_cap)
            img_index=params.images.length;
          }
        images[img_index-faces].style[direction]='20000px';
        for(var i=faces-1;i>=0;i--){
    	images[img_index-i].style.top = "0px"
          images[img_index-i].style[direction]=img_position[counter+i*params.steps];
          images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps];
    	  images[img_index-i].style.height=img_dimension[counter+i*params.steps];
    	 images[img_index-i].style.top = img_dimension[counter+i*params.steps];
          }
        }
      cdiv.onmouseover=function(){
        spinning=false;
        }
      cdiv.onmouseout=function(){
        spinning=true;
        }
      setTimeout('document.getElementById("'+cdiv.id+'").rotate()',200);
      }
    </script>
    </head><body>
    <script type='text/javascript'>
    
    carousel({id:'carousel_7',
              border:'',
              size_mode:'carousel',
              width:287,
              height:35,
              sides:24,
              steps:5,
              speed:11,
              direction:'right',
              images:['http://www.codingforums.com/images/icons/icon7.gif',
                      'http://www.codingforums.com/images/icons/icon8.gif',
                      'http://www.codingforums.com/images/icons/icon3.gif',
                      'http://www.codingforums.com/images/icons/icon4.gif',
                      'http://www.codingforums.com/images/icons/icon5.gif',
                      'http://www.codingforums.com/images/icons/icon9.gif',
                      'http://www.codingforums.com/images/icons/icon10.gif',
                      'http://www.codingforums.com/images/icons/icon13.gif',
                      'http://www.codingforums.com/images/icons/icon12.gif',
                      'http://www.codingforums.com/images/icons/icon11.gif',
                      'http://www.codingforums.com/images/icons/icon2.gif',
                      'http://www.codingforums.com/images/icons/icon6.gif'],
              links: ['http://www.codingforums.com/',
                      'http://www.codingforums.com/',
                      'http://www.codingforums.com/',
                      'http://www.codingforums.com/'],
              titles:[],
              image_border_width:1,
              image_border_color:'blue'
              });
    </script></div>
    </div>
    </body></html>
    Last edited by antimatter15; 06-29-2007 at 11:16 PM.

  6. #81
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help ?

    I love this carousel!!!
    I put it on one page with 6 images and it works perfect, however when I put it on another page with 12 images each and 6 rows of carousels i have one each blank red x image in each carousel and cant figure out how to get rid of that image. I have 12 images with link and titles in each row and i renamed each row differently. Does anyone know why i would have the blank image in each carousel ? Hope I am clear !

    Missticall

  7. #82
    New to the CF scene
    Join Date
    Jul 2007
    Location
    Enterprise, Coffee County, AL USA
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    A Boxie Problem

    I am sorry to bother you, Mr. Armadilla, but could you look at my page and tell me what I have done wrong to make the box that appears under my carousel, please?

    http://freepages.genealogy.rootsweb....enForever.html

    Thank you kindly for your time and assistance.

    You take care now.....

    Kwanja

  8. #83
    New to the CF scene
    Join Date
    Jul 2007
    Location
    Shanghai
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear KWANJA,

    I had the same problem.
    Just cancel the frame created automaticaly when inserting the script and there will no more box.

    How did you manage to align the carousel in the central position?

    Giocun

  9. #84
    New to the CF scene
    Join Date
    Jul 2007
    Location
    Enterprise, Coffee County, AL USA
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Voila!

    Thank you so very much! That worked perfectly! I had not even noticed the frame insert. *bonks self*

    I centered the carousel with

    <div align="center">

    just before the

    <!!--BEGIN BODY PHOTO DISPLAY--!!>
    <script type='text/javascript'>

    like this

    <div align="center">
    <!!--BEGIN BODY PHOTO DISPLAY--!!>
    <script type='text/javascript'>
    carousel({id:'InMemoryofStevenForever', //Enter arbitrary but unique ID of this slideshow instance border:'', size_mode:'image', //Enter "caro

    Hope that helps.

    Again, thank you for the help.

    You take care now.....

    Phyllis J. K. Owens

  10. #85
    New Coder
    Join Date
    Sep 2007
    Location
    Lancashire/Uk
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi everyone...First post

    Great script this...I just have one question...Can the code for the header be modified to validate as XHTML 1.0 Transitional?

    I ran my page through the validator,and 59 errors occured with the & signs and it states they should be &amp; ? But this stops the script from working.

    Either that or i guess its cool to host the script and then the page validates?

    Cheers anyway and nice forum/site.

    Neil.

  11. #86
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Quote Originally Posted by Website-Online View Post
    I ran my page through the validator,and 59 errors occured with the & signs and it states they should be &amp; ? But this stops the script from working.
    Two solutions:
    1. Move the script to a separate file.
    2. Add //<![CDATA[ directly after the opening script tag and add //]]> directly before the closing script tag.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  12. Users who have thanked liorean for this post:

    Website-Online (09-02-2007)

  13. #87
    New Coder
    Join Date
    Sep 2007
    Location
    Lancashire/Uk
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for that

    Would it be best hosting it seperately?

    Ive used it on four pages,so maybe it would just tidy the pages up a little...

    I suppose it wouldn't matter if the carousel id was the same or not then,and i could just reference the hosted code on each page.

    Ive used it here if you click the gallery link.

    Neil.
    Last edited by Website-Online; 09-02-2007 at 04:09 PM.

  14. #88
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey, great carousel! I wanted to tweak it just a bit (or a lot?). Not being a Javascript expert, I'm trying to modify the carousel to move either left or right with a mouseover on a left or right arrow. I'm using the carousel pictures as links to slideshows and the number of links will grow with time. This way the user has more control and doesn't have to wait for the carousel to go all the way around in one direction to get to something he/she wants. Also, the user won't be distracted by the moving carousel and can concentrate on the slideshow after he/she has moved the mouse away from the arrow and clicked on the thumbnail link. Thanks in advance for any reply. This is a great forum!

    Stu
    Last edited by stuart Meyer; 09-20-2007 at 04:53 PM.

  15. #89
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question fill carousel from directory

    I have a function that generates a random number, then selects a group of photos from an image directory based on the random number and puts them into an array. This works just fine.

    I want to use this array in the images param for the carousel.

    Can anyone help me? I noticed this thread hasn't been active lately, so I hope I can get an answer. Thanks.

  16. #90
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    My Improvements

    I have been using this script for years; I recently found this version; which is an improvement and added features. Anything I use something I have to reformat it for reading, then optimize it for Compressing; I didn't add any features; just improved on a few.
    I attached the files as a Zip; with the Compress file in CubeMin.zip and the UnCompressed version in the Cube.zip
    To use simple add the javascipt file into your header as such
    <script src="Cube.js" type="text/javascript"></script>
    I don't like big scripts in my pages; including them is always better
    I hope this works faster for you; the compressed version is the only one you should use in production; the uncompressed one is for view and modifying; always compress it before deploying it.
    I use this YUI command

    C:\PROGRA~2\Java\JRE16~1.0_0\bin\java.exe -jar C:\wamp\www\YuiCompressor\yuicompressor-2.3.5.jar --charset UTF-8 --nomunge --verbose C:\wamp\www\Javascripts\Cube\Cube.js -o C:\wamp\www\Deploy\Javascripts\Cube\Cube.js

    You'll have to fix the paths; and have Java Installed
    Please see detail in Cube.js in Uncompressed Zip file.
    I have tested this in Firefox, IE7, IE6, Opera and Safari
    If you make any improvements just post them here; if I get the time I'll incorporate them into a compressed version if you want; once you start using compress javascript files you will not go back; the speed of downloading and executing them is as fast it will will get to compiling them.
    Just giving back to the community.
    Thanks
    Jeff
    Attached Files Attached Files


 
Page 6 of 8 FirstFirst ... 45678 LastLast

LinkBacks (?)


Posting Permissions

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