Форум

piraids · #1 (**permalink**) 31.10.2013, 18:21

Встал такой вопрос как можно реализовать отключение colorbox'а для некоторых фото, т.е. сейчас подключен colorbox и любое фото открывается через него, необходимо запретить для некоторых фото использование colorbox'а, подскажите как реализовать?

рони · #2 (**permalink**) 31.10.2013, 18:31

Сообщение от piraids

реализовать отключение colorbox'а

зачем отключать если можно подключать только к нужным фото?

piraids · #3 (**permalink**) 31.10.2013, 18:34

необходимо при загрузке фото, добавить поле - галочку - наподобии использовать или не использовать colorbox - если галочка стоит, то при нажатии на картинку колорбокс разворачивает её, если галочка не стоит то при нажатии на картинку ничего не происходит

рони · #4 (**permalink**) 31.10.2013, 19:28

piraids,
так зачем все картинки подключать сразу подключайте только по клику на checkbox

piraids · #5 (**permalink**) 07.11.2013, 11:11

рони,
у меня подключен ckeditor, правда не знаю какой версии, но 3++ это точно, необходимо в настройках изображения добавить отключение colorbox'а
нашел вот в сети:

Цитата:

Решение есть нужно вставить этот код:

,{
	id : 'toGallery',
	type : 'select',
	'default' : '',
	style: 'margin-top: 15px',
	items :
	[
		[ editor.lang.gallery.notSet , ''],
		[ editor.lang.gallery.single , 'gallery'],
		[ editor.lang.gallery.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());
					}
				}
			}
		}
	}
}

в ckeditor/plugins/image/dialogs/image.js
и в соответствии с языком добавить соответствующий перевод

CKEDITOR.lang.ru.gallery = {notSet: 'Не использовать галерею', single: 'Сделать одиночное открытие', many: 'Сделать список галереей'};

в ckeditor/lang/ru.js

но почему то не работает(

рони · #6 (**permalink**) 07.11.2013, 11:57

piraids,
по настройке ckeditor пас, по теме из 1 поста решение есть но вам нужно я понял только для редактора.

piraids · #7 (**permalink**) 18.11.2013, 13:55

рони,
получилось впихнуть селект в ск едитор, надо теперь как то убрать коробокс по селекту, в данный момент выводится колорбокс по 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());
											}
										}
									}
								}
							}
						}

рони · #8 (**permalink**) 18.11.2013, 14:31

piraids,

piraids · #9 (**permalink**) 18.11.2013, 15:18

Сообщение от рони

piraids,
по настройке ckeditor пас, по теме из 1 поста решение есть но вам нужно я понял только для редактора.

а можете поделится решением?

рони · #10 (**permalink**) 18.11.2013, 15:23

piraids,

выделяем нужные фото галочкой и жмём на фото

<!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>

Форум

Справочник

Discord чат

Курсы javascript