Image border for Fancybox
Permalink Browser Info Environment
Hi Jordan
Sorry just noticed I should have put this here.
------------------------------
I am converting a site at the moment to Concrete5 that could really benefit from your Sortable Fancybox Gallery.
I just wanted to ask a question, I am sure it is straight forward but I wanted to check with you first.
The gallery I want to convert (http://www.) currently has images with a 1px border on both the thumbnail and the enlarged image. The site is an old html site and at the moment I have to add this border in Photoshop before I add an image to the site and then manually add the lightbox code. Now the customer is going to be adding their own images I can't expect them to add the border.
Is there away that the border can be added in to the block for both thumb and large image? If yes could you tell me where in the block I should be entering the CSS for the border?
Hope that all makes sense, look forward to hearing from you.
Regards
Alex
Sorry just noticed I should have put this here.
------------------------------
I am converting a site at the moment to Concrete5 that could really benefit from your Sortable Fancybox Gallery.
I just wanted to ask a question, I am sure it is straight forward but I wanted to check with you first.
The gallery I want to convert (http://www.) currently has images with a 1px border on both the thumbnail and the enlarged image. The site is an old html site and at the moment I have to add this border in Photoshop before I add an image to the site and then manually add the lightbox code. Now the customer is going to be adding their own images I can't expect them to add the border.
Is there away that the border can be added in to the block for both thumb and large image? If yes could you tell me where in the block I should be entering the CSS for the border?
Hope that all makes sense, look forward to hearing from you.
Regards
Alex
| Type: | Discussion |
|---|---|
| Status: | New |
Hi Jordan
Thanks for the reply, you are a rock star.
The thumbs were my main concern and I will take a good look at the lightbox code when I get the block.
Regards
Alex
Thanks for the reply, you are a rock star.
The thumbs were my main concern and I will take a good look at the lightbox code when I get the block.
Regards
Alex
Hi Jordan and Alex,
This was almost a year ago, but I hope you are tracking replies as I'd love to find a solution to this nagging problem. Searches and documentation are coming up short.
Adding a border to the thumbnails was a cinch, but I'm having difficulty with adding a border to the larger fancybox image. The border only shows on the top and left sides of the image. The right and bottom are masked by the white area surrounding the image. I've tried tinkering with things here and there and am about to give up.
I see Jordan was able to implement a border at the racheltrevormorgan.com site, so I'm curious... how did you do it???
Many thanks,
Lee-Roy
This was almost a year ago, but I hope you are tracking replies as I'd love to find a solution to this nagging problem. Searches and documentation are coming up short.
Adding a border to the thumbnails was a cinch, but I'm having difficulty with adding a border to the larger fancybox image. The border only shows on the top and left sides of the image. The right and bottom are masked by the white area surrounding the image. I've tried tinkering with things here and there and am about to give up.
I see Jordan was able to implement a border at the racheltrevormorgan.com site, so I'm curious... how did you do it???
Many thanks,
Lee-Roy
Hi Lee-Roy
Wow that is a blast from the past.
That is some Sherlock Holmes job you have done to track this one down.
Yes the Rachel Trevor-Morgan is one of mine and yes I remember banging my head against the wall for a long time to get that to work.
The magic CSS you are looking for should go in the view.css in the fancybox gallery and looks like this, excuse my memory notes in there.
I hope it works out for you.
Regards
Alex
Wow that is a blast from the past.
That is some Sherlock Holmes job you have done to track this one down.
Yes the Rachel Trevor-Morgan is one of mine and yes I remember banging my head against the wall for a long time to get that to work.
The magic CSS you are looking for should go in the view.css in the fancybox gallery and looks like this, excuse my memory notes in there.
/*gold border in fancybox, if you change this to border1px you have to change left and top to i think 9px */ div#fancybox-inner{ left:9px !important; top:9px !important; border:1px #93886C solid; }
I hope it works out for you.
Regards
Alex
Thanks so much for your fast reply, Alex! I'm looking for a way to implement that code, but I don't have a view.css file. I'm using fancybox 1.3.4, so maybe that's the reason?
Tried adding it to my jquery.fancybox-1.3.4.css, but to no effect. I've also searched my css files and my index, but there isn't anything already called fancybox-inner. Perhaps I'll have to check the js files? Sorry, my coding knowledge is limited and I'm figuring this one out as I go along.
I'll keep working at it...
Thanks for your help! If you have any more clues, feel free to share! Thank you.
Lee-Roy
Tried adding it to my jquery.fancybox-1.3.4.css, but to no effect. I've also searched my css files and my index, but there isn't anything already called fancybox-inner. Perhaps I'll have to check the js files? Sorry, my coding knowledge is limited and I'm figuring this one out as I go along.
I'll keep working at it...
Thanks for your help! If you have any more clues, feel free to share! Thank you.
Lee-Roy
view.css should be here:
SITEROOT/packages/sortable_fancybox_gallery/blocks/sortable_fancybox_gallery/view.css
And I see now that view.css is a concrete5 file. I wasn't aware of what concrete5 was. I'm just trying out fancybox on my own site and arrived at this page via google search. Okay, sorry for the confusion. I'll look into this further. Again, if you have any ideas, feel free to share. Thanks!!
Hi Jordan,
Yes, I've looked there, but I'll look again. Thanks.
Yes, I've looked there, but I'll look again. Thanks.
And my apologies, I just realized I called you Jordan in my original post, but I meant Alex.
:-)
:-)
So am I right in thinking that this is not a Concrete5 issue at all?
Maybe the solution to your problems would be to build the whole site in Concrete5.
I take it as a compliment being called Jordan by the way, if I ever grow up I want to know as much as he does :P
Maybe the solution to your problems would be to build the whole site in Concrete5.
I take it as a compliment being called Jordan by the way, if I ever grow up I want to know as much as he does :P
heh... you're too kind. Just keep doing what you're doing, after 10 years or so you'll surely know at least as much as I do :)
It sure was easy to get those borders. But, now there is now space between my thumbnails. So, the border looks more like a grid.
Tried editing the view css to increase the padding, but that did not have an effect.
Any ideas to solve this would be appreciated.
Tried editing the view css to increase the padding, but that did not have an effect.
Any ideas to solve this would be appreciated.
Hi Elanetti
Not 100% sure what you mean, could you provide us with a link to your page or do you have it on a local machine?
The layout I managed to achieve looks like thishttp://www.racheltrevormorgan.com/collections/hats...
Is that the sort of thing you mean?
Alex
Not 100% sure what you mean, could you provide us with a link to your page or do you have it on a local machine?
The layout I managed to achieve looks like thishttp://www.racheltrevormorgan.com/collections/hats...
Is that the sort of thing you mean?
Alex
Putting the border around the thumbnails should be fairly easy -- add this class to your theme's css file:
.sortable_fancybox_gallery_image {
border: 1px solid #CCC;
}
(Make that border whatever style you want -- that's just an example.)
Adding a border inside the lightbox is a bit trickier, but if you're experienced with CSS it shouldn't be too hard to figure out. The stylesheet for the lightbox is here:
SITEROOT/packages/sortable_fancybox_gallery/blocks/sortable_fancybox_gallery/fancybox/jquery.fancybox-1.3.1.css
Good luck!
-Jordan