colorbox для отдельных фото
Встал такой вопрос как можно реализовать отключение colorbox'а для некоторых фото, т.е. сейчас подключен colorbox и любое фото открывается через него, необходимо запретить для некоторых фото использование colorbox'а, подскажите как реализовать?
|
Цитата:
|
необходимо при загрузке фото, добавить поле - галочку - наподобии использовать или не использовать colorbox - если галочка стоит, то при нажатии на картинку колорбокс разворачивает её, если галочка не стоит то при нажатии на картинку ничего не происходит
|
piraids,
так зачем все картинки подключать сразу подключайте только по клику на checkbox |
рони,
у меня подключен ckeditor, правда не знаю какой версии, но 3++ это точно, необходимо в настройках изображения добавить отключение colorbox'а нашел вот в сети: Цитата:
|
piraids,
по настройке ckeditor пас, по теме из 1 поста решение есть но вам нужно я понял только для редактора. |
рони,
получилось впихнуть селект в ск едитор, надо теперь как то убрать коробокс по селекту, в данный момент выводится колорбокс по onClick, ему присваивается класс class="cboxElement" В ck editor сейчас мой кусочек выглядит так, но он сделан для атрибута rel, т.е. если есть атрибут rel то мы ставим свой класс я так понимаю, как переделать чтобы закрыть onClick или сделать его пустым, если у нас ничего не указано?
{
id : 'cmbTargets',
type : 'select',
label : editor.lang.common.zoom,
'default' : '',
items :
[
[ editor.lang.common.notGallery , ''],
[ editor.lang.common.single , 'gallery'],
[ editor.lang.common.many , 'gallerys']
],
setup : function( type, element ) {
if ( type == LINK ) {
var a = element.getAttribute('rel');
if (null == a) {
this.setValue(element.getAttribute('class'));
} else {
this.setValue(element.getAttribute('rel'));
}
}
},
commit : function(type, element) {
if (type == LINK) {
if ( this.getValue() || this.isChanged()) {
if ('gallery' == this.getValue()) {
element.setAttribute('class', this.getValue());
element.removeAttribute('rel');
} else {
if ('' == this.getValue()) {
element.removeAttribute('class', this.getValue());
element.removeAttribute('rel', this.getValue());
} else {
element.setAttribute('class', this.getValue());
element.setAttribute('rel', this.getValue());
}
}
}
}
}
}
|
piraids,:-?
|
Цитата:
|
colorbox and checkbox
piraids,
:write: выделяем нужные фото галочкой и жмём на фото
<!doctype html>
<html>
<head>
<base href="http://learn.javascript.ru/files/tutorial/browser/events/gallery/">
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
jQuery(document).ready(function () {
jQuery('#thumbs a').click(function(event){
event.preventDefault()
});
jQuery('input:checkbox').click(function(){
jQuery.colorbox.remove()
jQuery('input:checked').prev().colorbox({rel:'test'})
});
});
</script>
<style type="text/css">
body{margin:0;padding:0}
#thumbs a:hover{border:#F90}
#thumbs li{list-style:none;display:inline-block}
#thumbs{margin:5% auto;padding:0; width: 550px;}
#thumbs input{ display: block; margin: 0% auto}
</style>
</head>
<body>
<ul id="thumbs">
<li><a href="img2-lg.jpg" title="Image 2"><img src="img2-thumb.jpg"></a><input name="" type="checkbox" ></li>
<li><a href="img3-lg.jpg" title="Image 3"><img src="img3-thumb.jpg"></a><input name="" type="checkbox" ></li>
<li><a href="img4-lg.jpg" title="Image 4"><img src="img4-thumb.jpg"></a><input name="" type="checkbox" ></li>
<li><a href="img5-lg.jpg" title="Image 5"><img src="img5-thumb.jpg"></a><input name="" type="checkbox" ></li>
<li><a href="img6-lg.jpg" title="Image 6"><img src="img6-thumb.jpg"></a><input name="" type="checkbox" ></li>
</ul>
</body>
</html>
|
рони,
спасибо!))) |
Есть задумка - присваивать id картинке в ck editore, и если этот айдишник есть то не использовать галерею, сейчас присваиваю айди так, но блин не могу удалить атрибут, если выбрано пустое значение
{
id : 'colorBox',
type : 'select',
label : editor.lang.common.zoom,
'default' : '',
items :
[
[ editor.lang.common.notGallery , ''],
[ editor.lang.common.single , 'cboxElement']
],
setup : function( type, element )
{
if ( type == IMAGE )
{
this.setValue( element.getAttribute( 'id' ) );
}
},
commit : function(type, element) {
if ( type == IMAGE )
{
if ( this.getValue() || this.isChanged() )
element.setAttribute( 'id', this.getValue() );
if ( this.getValue() == '')
{
element.removeAttribute('id');
}
}
}
}
|
piraids,
Цитата:
|
Решил проблему следующим образом:
в ck editor в ckeditor/plugins/image/dialogs/image.js вставил такой кусочек кода:
,
{
id : 'colorBox',
type : 'select',
label : editor.lang.common.zoom,
'default' : '',
items :
[
[ editor.lang.common.notGallery , ''],
[ editor.lang.common.single , 'activeCBox']
],
setup : function( type, element )
{
if ( type == IMAGE )
{
var value = this.getValue();
this.setValue( element.getAttribute( 'class' ) );
}
},
commit : function(type, element) {
if ( type == IMAGE )
{
if ( this.getValue() || this.isChanged() )
element.setAttribute( 'class', this.getValue() );
}
}
}
а в вызове colorbox'а сделал так:
<script>
$(document).ready(function(){
$('img.activeCBox').click(function() {$(this).colorbox({href: $(this).attr('src')});
});
});
</script>
|
| Часовой пояс GMT +3, время: 14:11. |