Page 1 of 11
Forum moderator: Eriko 
uCoz Community » uCoz Modules » Photo Albums » Editing of Ligthbox appearance
Editing of Ligthbox appearance
Sunny
Posts: 9296
Reputation: 456

Message # 1 | 12:10 PM
LightBox is a script of displaying images on a current page in an Ajax window without page reloading. The default LightBox on a uCoz website looks like this:



You can edit the default uCoz LightBox appearance using the guide below, if you have enough JavaScript and CSS skills. If you are not confident in your abilities, we do not recommend to do this and suggest that you use the default system settings as the most optimal.


To change the default LightBox parameters, add the following code to the bottom of all website pages:

Control Panel → Customize Design → Global blocks → Bottom part of the website


Code
<script type="text/javascript">   
$(document).ready(function(){   
$('.ulightbox').fancybox({padding: 3, preload: 5, openEffect: openEf, closeEffect: 'elastic', nextEffect: 'fade', prevEffect: 'fade', openEasing: 'linear', nextEasing: 'linear', prevEasing: 'linear', fixed: fixedFlag, helpers: {title: null, overlay : {opacity: 0.1, speedIn: 0, speedOut: 0}, buttons : {}}});   
});   

function _bldCont1(id, indx) {   
idarray = 'allEntImgs' + id;   
imgar = [];   
for (var i=0;i<eval(idarray).length;i++) {   
imgar[i] = eval(idarray)[i][0];   
}   
$.fancybox(imgar,{index: indx, padding: 3, preload: 5, openEffect: openEf, closeEffect: 'elastic', nextEffect: 'fade', prevEffect: 'fade', openEasing: 'linear', nextEasing: 'linear', prevEasing: 'linear', fixed: fixedFlag, helpers: {title: null, overlay : {opacity: 0.1, speedIn: 0, speedOut: 0}, buttons: {}}});   
}   
</script>  


You can edit the following default parameters:

padding — the width of the white frame around an image;
preload — the number of images for preloading;
closeEffect — the effect of window closing (elastic, fade, none);
nextEffect, prevEffect — the effect of switching to next/previous image (elastic, fade, none);
opacity — shading opacity, can be set from 0 (fully transparent) to 1 (nontransparent);
speedIn, speedOut — the time of appearance/disappearance of shading in milliseconds.




To change the shading background, add the following line to CSS:

Control Panel → Customize Design → Style Sheets (CSS)


Code
#fancybox-overlay {background: #ff0000 !important;}


#ff0000 – the background color. Can be replaced by an image with the following parameter url(/fon.jpg).

The more detailed info can be found here

I'm not active on the forum anymore. Please contact other forum staff.
dvhout
Posts: 7
Reputation: 0

Message # 2 | 9:16 AM
I think the control panel has been updated since the previous item was placed.
some minor changes

Control Panel → Customize Design → Global blocks → Bottom part of the website
changed in:
control panel → Design → Design management (templates) → 'Bottom part of the website'

Control Panel → Customize Design → Style Sheets (CSS)
changed in
Control panel → Design → Design management (CSS)

good luck!
Sunny
Posts: 9296
Reputation: 456

Message # 3 | 10:08 AM
dvhout, there are two ways to access templates. Either via Top Bar -> Design



or via Customize Design on CP home page

Attachments: 1168487.png(32Kb) · 3770810.png(23Kb)

I'm not active on the forum anymore. Please contact other forum staff.
ross23456
Posts: 7
Reputation: 0

Message # 4 | 9:46 AM
hi Everryone
it is possible to make LightBox to somethink like that?
i with like to put som advertisment beside the photo ...
Attachments: 3287969.png(439Kb)
Post edited by ross23456 - Friday, 2012-10-12, 9:50 AM
Sunny
Posts: 9296
Reputation: 456

Message # 5 | 1:07 PM
ross23456, I'm afraid it is not possible.
I'm not active on the forum anymore. Please contact other forum staff.
Mar1aN
Posts: 186
Reputation: 3

Message # 6 | 0:22 AM
I don't understand why the css and js from lightbox appears in my modules though i don't use it, and don't intend to use it!
Paradox
Posts: 3275
Reputation: 145

Message # 7 | 3:46 AM
Mar1aN, it's a default aspect of the system - most CMS link to all the required system files due to them being called as a block within the server. Unfortunately it's not really possible to get around that at the moment.
Developer, Designer, Communicator.
Been here for 6 years and counting.
Visit me at alexmoloney.me.
uCoz Community » uCoz Modules » Photo Albums » Editing of Ligthbox appearance
Page 1 of 11
Search: