PDA

View Full Version : Sorted the carousel/lightbox prob, new problem now



fraggit
06-07-2011, 10:11 PM
1) Script Title: carousel2 and lightbox 2

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/carousel2.htm & http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm
3) Describe problem: Ok, got lightbox to work with carousel2 after some senior moments :D. I have a new problem now, if I click on a picture on the carousel it keeps starting the lightbox slideshow at picture 10.
Test page here (http://www.qsl.net/2d0drm/carousel11.htm) so you can look at the source code to see if or where I'm going wrong.One other thing, the pictures are being uploaded as I receive them, maybe thats got something to do with it.

any help would be appreciated.

Thanks.

Paul

jscheuer1
06-08-2011, 02:56 AM
<!DOCTYPE html>
<html lang="en-gb" xml:lang="en-gb">
<head>
<title>DRM CAMS OF THE WORLD</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="keywords" content="drm,sstv,amateur radio,drm webcams,drm cam,drm cams,2d0drm,webcams,easypal cam,Easypal cams">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="icon" href="http://homepages.manx.net/2d0drm/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://homepages.manx.net/2d0drm/favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></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
***********************************************/

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;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)){
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];
cdiv.getElementsByTagName('a')[cdiv.getElementsByTagName('a').length - 1].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>
<style type="text/css">
#lbc2d0drm {
margin: 0 auto!important;
}
</style>
</head>
<body>
<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:['http://homepages.manx.net/2d0drm/image1',
'http://homepages.manx.net/2d0drm/image2',
'http://homepages.manx.net/2d0drm/image3',
'http://homepages.manx.net/2d0drm/image4',
'http://homepages.manx.net/2d0drm/image5',
'http://homepages.manx.net/2d0drm/image6',
'http://homepages.manx.net/2d0drm/image7',
'http://homepages.manx.net/2d0drm/image8',
'http://homepages.manx.net/2d0drm/image9',
'http://homepages.manx.net/2d0drm/image10'],
links: ['http://homepages.manx.net/2d0drm/image1',
'http://homepages.manx.net/2d0drm/image2',
'http://homepages.manx.net/2d0drm/image3',
'http://homepages.manx.net/2d0drm/image4',
'http://homepages.manx.net/2d0drm/image5',
'http://homepages.manx.net/2d0drm/image6',
'http://homepages.manx.net/2d0drm/image7',
'http://homepages.manx.net/2d0drm/image8',
'http://homepages.manx.net/2d0drm/image9',
'http://homepages.manx.net/2d0drm/image10'],
lnk_base:'lightbox[2D0DRM]', //Link target for all links (see: 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:2,
image_border_color:'cornflowerBlue'
});
</script>
</body>
</html>

Notes: I'm still not happy with the Carousel script. I got it working for this, but I'm afraid it may no longer be usable for an ordinary Carousel. As for Lightbox, with no other content on the page and such large images, there are times in some browsers when the overlay appears to be too small.

fraggit
06-08-2011, 05:32 AM
Well John, you are a star.....it works superb.
I can't thank you enough.
The link I gave you was just a test page, I've implemented it on the main page I wanted it for, which is here (http://www.qsl.net/2d0drm/drmcams.htm).
Only half done at the moment, but as you see, it works.
Can I ask what you actually did to the script, maybe highlight it for me.
I like to try and learn from my mistakes, as you can tell I'm a complete novice at this sort of thing.
I'm guessing it was within the carousel script itself.
Thanks again John.

Paul

jscheuer1
06-08-2011, 06:59 AM
Where to begin? First off this isn't the Lightbox script from Dynamic Drive (v2.03a). It's version 2.05. Starting with v2.04 Lightbox began to trigger off of clicks to the page rather than clicks to the links. This allows us to construct rel="lightbox" links and append them to the page after Lightbox initializes without having to attempt to trigger Lightbox for these links.

I don't have your original code but that was what that function that was inside here:


else if(/^lightbox/.test(targ)){
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]);
}

was trying to do. It didn't. Lightbox was launching off of the invalid links (they were all unclosed) that were hard coded to the page. I removed those. They were why it always started at 10. That was the last link before the slideshow, so any click on the show triggered it.

Other than that I simply kept the code (in the above code block) that constructed Lightbox links and appended them to the page. I removed the display none from that code because later I appended the Carousel images to the created links:


cdiv.getElementsByTagName('a')[cdiv.getElementsByTagName('a').length - 1].appendChild(images[i]);

and we want to see those images and be able to click on the links. That line replaced:


cdiv.appendChild(images[i]);

The rest of the changes were just to tidy up the code, construct a standards compliant page, and to center the Carousel.

BTW, the images array and the links array can be different. The images are what's shown in the Carousel, and the links are what's shown in the Lightbox. You're using the same images for both. That's why the arrays are coded identically.

Unless you have specific questions, that's about it by way of explanation of what I did. I've since tightened up the Carousel code though:


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

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>

to make it a bit more efficient and to allow for it to also be used for non-Lightbox Carousels on the same page

fraggit
06-08-2011, 08:30 AM
Wow....I think what your saying from your explanation is, I had a cat in hells chance of sorting that myself ;). Well it'll take me a couple of days to digest that. I did originally follow this forum link (http://www.dynamicdrive.com/forums/showthread.php?t=41445&highlight=carousel+lightbox) maybe you remember it? that of course, wouldn't of worked as you explained with this code
else if(/^lightbox/.test(targ)){
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]);
}

This was the code in the forum link I was following, which is the same, I think, with a few more lines
else if(/^lightbox/.test(targ)){
params.links[i] = [params.links[i], document.createElement('a')];
params.links[i][1].href = params.links[i][0];
params.links[i][1].style.display = 'none';
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]);
(function(i, l){
i.onclick = function(){myLightbox.start(l)};
})(images[i], params.links[i][1]);
}



Anyway, I'm waffling now :)
Thank you so much John, we're lucky to have people like you to sort these problems out.

All the best

Paul

jscheuer1
06-08-2011, 02:21 PM
There was another change in Lightbox v2.05, or perhaps even 2.04 - myLightbox was no longer defined, and the start function became a private method such that, without modification to the lightbox.js script, one can no longer launch a Lightbox except by clicking on a rel="lightbox" link or area tag.

npimpfellow
05-30-2012, 02:02 AM
I am trying to change this code so that it will support thickbox instead of light box however thickbox uses class="thickbox" to intiate... can you assist?
Thanks for the help!