PDA

View Full Version : Carousel Help Please



Kevinm26
08-09-2012, 06:01 PM
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.


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.


<!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

jscheuer1
08-09-2012, 06:10 PM
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:



/***********************************************
* 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.

Kevinm26
08-10-2012, 02:20 AM
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

bernie1227
08-10-2012, 06:50 AM
Well! You could try and use it in conjunction with the lightbox script:
http://lokeshdhakar.com/projects/lightbox2/

jscheuer1
08-10-2012, 03:48 PM
I actually have that worked out for:

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

Install the current version Lightbox (http://lokeshdhakar.com/projects/lightbox2/) (2.51 last I checked) files in the head of the page.

Followed by this version of the Carousel II script:


<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:


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

Kevinm26
08-12-2012, 10:12 PM
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

jscheuer1
08-12-2012, 11:56 PM
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.

Kevinm26
08-17-2012, 02:17 AM
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.

jscheuer1
08-17-2012, 02:47 AM
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.