Page 1 of 1
calguy lightbox module
Posted: Tue Mar 30, 2010 8:40 pm
by buntrosgali
hey guys i have used calguys lightbox module and it works great, but is there any way you can link 4 images together on one page so the user can simply click the next and previous button on the image instead of having to close lightbox and open new one?
here is my site, you can see the 4 images i have.
my site
i have each image in a different content block.
Re: calguy lightbox module
Posted: Tue Mar 30, 2010 9:45 pm
by Peciura
You missed one parameter on "LightBox" help page.
(optional) name="" - Specify a name for the rel link. This can be used to group images together and to allow paging back and forth between them
Re: calguy lightbox module
Posted: Wed Apr 07, 2010 11:51 am
by buntrosgali
thanks man im trying to work out how this works though.
I have 4 seperate divs and each div has a seperate content block which has the thumbnail and the attached lightbox largin image.
my code on each div looks like this
how do i use this extra paramater?
Re: calguy lightbox module
Posted: Wed Apr 07, 2010 12:45 pm
by Peciura
It could be
If you are writing html yourself do it like this:
Re: calguy lightbox module
Posted: Wed Apr 07, 2010 1:07 pm
by buntrosgali
cool thats working but.. there are no image to make it clear how to look for next image, ie. next , previous
heres the site here
click on the firstthumbnail and you will see what i mean.
my site
Re: calguy lightbox module
Posted: Wed Apr 07, 2010 2:56 pm
by Peciura
Edit "/modules/LightBox/css/lightbox.css" as follows:
#prevLink:hover, #prevLink:visited:hover {
background: url(/modules/LightBox/images/prevlabel.gif) left 15% no-repeat;
}
#nextLink:hover, #nextLink:visited:hover {
background: url(/modules/LightBox/images/nextlabel.gif) right 15% no-repeat;
}
If you want there are other images you can use them or upload your own:
"/modules/LightBox/images/
next.gif"
"/modules/LightBox/images/
prev.gif"
Re: calguy lightbox module
Posted: Wed Apr 07, 2010 3:23 pm
by buntrosgali
these are actually allready set in the stylesheet and is linking to the proper image source. But its not showing ??
#prevLink:hover, #prevLink:visited:hover { background: url(modules/LightBox/images/prevlabel.gif) left 15% no-repeat; background-color:#000; }
#nextLink:hover, #nextLink:visited:hover { background: url(modules/LightBox/images/nextlabel.gif) right 15% no-repeat; }
could it possible be hidden with opacity or something?
Re: calguy lightbox module
Posted: Wed Apr 07, 2010 9:03 pm
by Peciura
You are missing leading "/" in background url
Re: calguy lightbox module
Posted: Thu Apr 08, 2010 10:21 am
by buntrosgali
I do have it now but it is still not showing
#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#lightbox a img{ border: none; }
#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#imageContainer{
padding: 10px;
}
#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(/modules/LightBox/images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover {
background: url(/modules/LightBox/images/prevlabel.gif) left 15% no-repeat;
}
#nextLink:hover, #nextLink:visited:hover {
background: url(/modules/LightBox/images/nextlabel.gif) right 15% no-repeat;
}
#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%
}
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}
Re: calguy lightbox module
Posted: Thu Apr 08, 2010 10:32 am
by owr_bgld
Maybe you did it in an wrong file - that shows your css file which is called:
Code: Select all
#prevLink:hover, #prevLink:visited:hover { background: url(modules/LightBox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(modules/LightBox/images/nextlabel.gif) right 15% no-repeat; }
Re: calguy lightbox module
Posted: Thu Apr 08, 2010 10:53 am
by buntrosgali
no i have made those changes in LightBox Sample CSS stylesheet
Re: calguy lightbox module
Posted: Thu Apr 08, 2010 12:01 pm
by owr_bgld
yes, you changed it, but the changes were not saved jet. That can happen (for example) if you uploaded the module via ftp and the owner via ftp is not the same as the owner made via cms. (There are several entrys in the forum) - I had this problem with one of my sites.
Code: Select all
<link rel="stylesheet" href="http://your.domain-is.here/modules/LightBox/css/lightbox.css" type="text/css" media="screen" />
so there are two possibilitys
a) new upload the module (after deinstalling it and deleting all files of the module) via the xml-file
or
b) download the css-file (/modules/LightBox/css/lightbox.css), edit it with text-editor and upload the changed file again.
Re: calguy lightbox module
Posted: Thu Apr 08, 2010 1:12 pm
by Peciura
I opened your site with Firebug and could not see any changes you had done to css. (may be owr_bgld is right about file permissions).
in case you do not know what Firebug here are some links you want to visit
http://forum.cmsmadesimple.org/index.ph ... #msg162522
http://www.klauskomenda.com/archives/20 ... r-browser/
With FireBug you can edit CSS on the fly to see it you changes would have desired effect.
Re: calguy lightbox module "solved"
Posted: Thu Apr 08, 2010 2:23 pm
by buntrosgali
YEAAAAAAAA
THANKS Guys i downloaded the css file via ftp and put the / into it and it is now working!!!
thanks guys!!!