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

[sergspb]

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

[Exploits]

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

[afwollis]

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

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

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

upd:

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

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

ждем ответа.

Змінено 30 вересня 2015 користувачем afwollis

[sergspb]

 Версия ocStore 1.5.5.1.2

[afwollis]

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

...
		$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>

[sergspb]

Большое спасибо!

[Marianna]

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

...
		$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

Змінено 4 березня 2016 користувачем Marianna