Results 1 to 9 of 9

Thread: Carousel Help Please

  1. #1
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Carousel Help Please

    For the carousel I have it working but I wanted to know if when you click on the link, if you can make the image get enlarged for better viewing.

    "C:\Users\Kevin" - is where the location of the picture is. Basically just want to be able to click on the image and then it will open it in a larger window. Is that possible?

    Here is the code right now and I believe it has something to do with this.

    Code:
    Car_Image_Sources=new Array(
    		"Floor Hockey.jpg","C:\Users\Kevin",
    		"crosby1.jpg","C:\Users\Kevin",
                    "brodeur.jpg", "C:\Users\Kevin",
                    "hockey_hielo.jpg", "C:\Users\Kevin",
                    "hockey_kick.jpg", "C:\Users\Kevin",
                    "net.jpg", ""
                    );



    The rest of the code is as follows, but I have a feeling that it has something to do with the above code.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
        >
    <html lang="en">
    <head>
        <title>Carousel Test </title>
    </head>
    <body onload="Carousel()"> 
       
    <div id="Carousel" style="position:center">
    		<img src="placeholder.gif" width="504" height="202">
    	</div>
            
    <script type="text/javascript">
    
    /********************************************************
    	Create a div with transparent place holder in your html	
    	<div id="Carousel" style="position:relative">
    		<img src="placeholder.gif" width="404" height="202">
    	</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=300;
    	var Car_Image_Height=250;
    	var Car_Border=true;		// true or false
    	var Car_Border_Color="white";
    	var Car_Speed=6;
    	var Car_Direction=true;		// true or false
    	var Car_NoOfSides=6;		// 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(
    		"Floor Hockey.jpg","C:\Users\Kevin",
    		"crosby1.jpg","C:\Users\Kevin",
                    "brodeur.jpg", "C:\Users\Kevin",
                    "hockey_hielo.jpg", "C:\Users\Kevin",
                    "hockey_kick.jpg", "C:\Users\Kevin",
                    "net.jpg", ""
                    );
            
            
    
    /***************** 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="position:relative">
      
    </div>
    
    </p>
    
    
    
    
    </body>
    </html>



    Thank you for your help.

    Kevin
    Last edited by jscheuer1; 08-09-2012 at 06:07 PM. Reason: Format

  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

    That's:

    http://www.dynamicdrive.com/dynamicindex14/carousel.htm

    The Car_Image_Sources looks OK.

    Make sure you're following all the instructions and not leaving out any commas, etc., including where it says:

    Code:
    /***********************************************
    * 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
    ***********************************************/
    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

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

  3. #3
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    My question is, is it possible for when you hover the mouse over the image, are you able to click on the image that you select and it would be enlarged? For example if you were to click the image, can the image open up in a pop-up which would be a larger view of the image?

    Thanks

    Kevin

  4. #4
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Well! You could try and use it in conjunction with the lightbox script:
    http://lokeshdhakar.com/projects/lightbox2/
    Last edited by jscheuer1; 08-10-2012 at 03:49 PM. Reason: fix broken link
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  5. #5
    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

    I actually have that worked out for:

    http://www.dynamicdrive.com/dynamici.../carousel2.htm

    Install the current version Lightbox (2.51 last I checked) files in the head of the page.

    Followed by this version of the Carousel II script:

    Code:
    <script type='text/javascript'>
    
    /***********************************************
    * Carousel Slideshow II- By Harry Armadillo (http://www.codingforums.com/showthread.php?t=58814)
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    * Please keep this notice intact
    * Updated in Dynamic Drive Forums for optional Lightbox tie-in. Updated by jscheuer1
    ***********************************************/
    
    function carousel(params){
      carousel.lightbox = false;
      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;overflow:hidden;' id='"+params.id.replace(/[^a-zA-Z0-9]+/g,'_')+"'></div>");
      var cdiv=document.getElementById(params.id.replace(/[^a-zA-Z0-9]+/g,'_'))
      cdiv.style.width=params.width+'px';
      cdiv.style.height=params.height+'px';
      cdiv.style.border=params.border;
      cdiv.style.position='relative';
      cdiv.style.overflow='hidden';
      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, targ, attr, faraway;
    
      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";
          }      
        faraway=(direction=="left"||direction=="top")?'-20000px':'20000px';
        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]=faraway;
        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]!=''){
            targ=params.lnk_targets && params.lnk_targets[i]||params.lnk_base||'new';
            if(targ=="_blank"){
              attr=(params.lnk_attr && params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
              images[i].onclick=new Function("window.open('"+params.links[i]+"','"+targ+"'"+attr+")");
              }
            else if(targ.substr(0,1)=="_"){
              images[i].onclick=new Function(targ.substr(1)+".location='"+params.links[i]+"'");
              }
            else if(/^lightbox/.test(targ)){
              carousel.lightbox = true;
              params.links[i] = [params.links[i], document.createElement('a')];
              params.links[i][1].href = params.links[i][0];
              params.links[i][1].rel = targ;
              params.links[i][1].title = (params.titles && params.titles[i]? params.titles[i] : '');
              cdiv.appendChild(params.links[i][1]);
              }
    
            else{
              attr=(params.lnk_attr && params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
              images[i].onclick=new Function("var t='"+targ+"';if(window[t]){try{window[t].close()}catch(z){}}window[t]=window.open('"+params.links[i]+"',t"+attr+");window[t].focus()");
              }
            images[i].style.cursor=document.all?'hand':'pointer';
            }
    
          if(params.titles && params.titles[i] && params.titles[i]!='')
            images[i].title=params.titles[i];
          if(document.all)
            images[i].alt=images[i].title;
          images[i+params.images.length]=images[i];
          if(params.images.length==faces)
            images[i+2*params.images.length]=images[i];
          if(carousel.lightbox)
            params.links[i][1].appendChild(images[i]);
          else
            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':faraway;
          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]=faraway;
        for(var i=faces-1;i>=0;i--){
          images[img_index-i].style[direction]=img_position[counter+i*params.steps];
          images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps];
          }
        }
      cdiv.onmouseover=function(){
        spinning=false;
        }
      cdiv.onmouseout=function(){
        spinning=true;
        }
      setTimeout('document.getElementById("'+cdiv.id+'").rotate()',100);
      }
    </script>
    Use an init like so:

    Code:
    <script type='text/javascript'>
    carousel({id:'lbc2d0drm',
              border:'0',
              size_mode:'image',
              width:100,
              height:100,
              sides:10,
              steps:23,
              speed:3,
              direction:'right',
              images:['thumbs/image1',
                      'thumbs/image2',
                      'thumbs/image3',
                      'thumbs/image4',
                      'thumbs/image5',
                      'thumbs/image6',
                      'thumbs/image7',
                      'thumbs/image8',
                      'thumbs/image9',
                      'thumbs/image10'],
              links: ['large/image1',
                      'large/image2',
                      'large/image3',
                      'large/image4',
                      'large/image5',
                      'large/image6',
                      'large/image7',
                      'large/image8',
                      'large/image9',
                      'large/image10'],					
    	lnk_base:'lightbox[groupname]', //Link target or if lightbox[somthing] link rel for all links (first introduced as target only: http://www.codingforums.com/showthread.php?t=58814&page=2)
              titles:['Image #1',
    		'Image #2',
    		'Image #3',
    		'Image #4',
    		'Image #5',
    		'Image #6',
    		'Image #7',
    		'Image #8',
    		'Image #9',
    		'Image #10'],
              image_border_width:0,
              image_border_color:'#ffffff'
              });
    </script>
    - John
    ________________________

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

  6. #6
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you, but the only other question that I have is once the image has been enlarged once you click on that image, is there any way in which I can put an
    'X' for example in which would close that image and go back to the page?

    Thanks

    Kevin

  7. #7
    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

    Install Lightbox and all of its support files (including scripts, css and images) as in the archive available from:

    http://lokeshdhakar.com/projects/lightbox2/

    and that's part of the package.

    If you're not seeing the close button, there's some problem with the implementation/installation.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

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

  8. #8
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    in the section where you write the names of the images. Is it possible to be able to use php and extract the names from a mySQL database and echo them out? I know how to get the names from the mysql database using php and I know how to echo each name with a while statement, but can I actually put this code within the images section of the script?

    this is what I tried.

    images:[<?php
    while($row = mysql_fetch_assoc($getPics))
    {
    echo"'images/$row['pic_name']',";
    ?>],

    when I ran it in the browser I got the following error.
    Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting T_STRING or T_VARIABLE or T_NUM_STRING in C:\xampp\htdocs\CAC2\template1.php on line 194

    Thanks for your help.

  9. #9
    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

    That's a PHP error. I think your quoting may be wrong. Double check your PHP code. Line 194. It might be a line or two, perhaps more above that, or that line itself.

    If you want more help, ask in the PHP section.
    Last edited by jscheuer1; 08-17-2012 at 02:54 AM.
    - 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
  •