sergspb

[Решено] Как сделать увеличение фото по клику в статьях?

Рекомендуемые сообщения

sergspb    2

Кто-нибудь может подсказать, как сделать увеличение фото по клику в статьях так же, как и в товарах, красиво? Может, можно как-то подключить скрипт увеличения  в настройках свойств изображения?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Exploits    144

Какая версия OC?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
afwollis    1 091

та без проблем.

надо только обернуть вывод статьи в шаблоне в какой-то блок (с class или id), подключить colorbox в контроллере, передать хотя бы information_id в шаблон и добавить небольшой скрипт.

позже выложу пример кода.

upd:

Какая версия OC?

хороший вопрос :-)

ждем ответа.

Изменено пользователем afwollis

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
afwollis    1 091

в контроллере

...
		$information_info = $this->model_catalog_information->getInformation($information_id);
		if ($information_info) {
...
>>

...
		$information_info = $this->model_catalog_information->getInformation($information_id);
		if ($information_info) {
			$this->document->addScript('catalog/view/javascript/jquery/colorbox/jquery.colorbox-min.js');
			$this->document->addStyle('catalog/view/javascript/jquery/colorbox/colorbox.css');
			
			$this->data['information_id'] = $information_id;
...
убедиться, что скрипты colorbox есть по указанному пути.

в шаблоне обернуть $heading_title и $description в блок, например

<div id="information_container">
в конце файла, перед

<?php echo $footer; ?>
добавить

<script type="text/javascript"><!--
$(document).ready(function() {
	$('#information_container').find('img').each(function(td_cb_img_idx, td_cb_img) {
		$(td_cb_img).css('cursor', 'pointer');
		
		// prepare html for colorbox
		var td_cb_img_html = '<a href="'+td_cb_img.src+'" class="info_<?php echo $information_id; ?>_img_link" rel="info_<?php echo $information_id; ?>_album"><img src="'+td_cb_img.src+'" width="'+td_cb_img.width+'" height="'+td_cb_img.height+'" /></a>';
		
		// replace images to link+image for colorbox
		$(td_cb_img).replaceWith(td_cb_img_html);
	});
	
	// invoke colorbox
	$('.info_<?php echo $information_id; ?>_img_link').colorbox({
		height:          '90%',
		overlayClose:    true,
		opacity:         0.5,
		rel:             'info_<?php echo $information_id; ?>_album'
	});
});
//--></script>

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Marianna    56

в контроллере

...
		$information_info = $this->model_catalog_information->getInformation($information_id);
		if ($information_info) {
...
>>

...
		$information_info = $this->model_catalog_information->getInformation($information_id);
		if ($information_info) {
			$this->document->addScript('catalog/view/javascript/jquery/colorbox/jquery.colorbox-min.js');
			$this->document->addStyle('catalog/view/javascript/jquery/colorbox/colorbox.css');
			
			$this->data['information_id'] = $information_id;
...
убедиться, что скрипты colorbox есть по указанному пути.

в шаблоне обернуть $heading_title и $description в блок, например

<div id="information_container">
в конце файла, перед

<?php echo $footer; ?>
добавить

<script type="text/javascript"><!--
$(document).ready(function() {
	$('#information_container').find('img').each(function(td_cb_img_idx, td_cb_img) {
		$(td_cb_img).css('cursor', 'pointer');
		
		// prepare html for colorbox
		var td_cb_img_html = '<a href="'+td_cb_img.src+'" class="info_<?php echo $information_id; ?>_img_link" rel="info_<?php echo $information_id; ?>_album"><img src="'+td_cb_img.src+'" width="'+td_cb_img.width+'" height="'+td_cb_img.height+'" /></a>';
		
		// replace images to link+image for colorbox
		$(td_cb_img).replaceWith(td_cb_img_html);
	});
	
	// invoke colorbox
	$('.info_<?php echo $information_id; ?>_img_link').colorbox({
		height:          '90%',
		overlayClose:    true,
		opacity:         0.5,
		rel:             'info_<?php echo $information_id; ?>_album'
	});
});
//--></script>

а чего только первое фото работает? если на странице идет вывод многих статей то у других не всплывает фото, так и остается миниатюрой

http://schoolbook.com.ua/index.php?route=school/new

Изменено пользователем Marianna

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу