Jump to content

Пытаюсь улучшить модальное окно fancybox

yuazakharov
 Share

Recommended Posts

yuazakharov Newbie

yuazakharov

Posted
Posted

Добрый день! Как к модальному окну fancybox прикрутить кнопку Toggle size (оригинальный размер)? Как тут http://www.fancyapps.com/fancybox/#examples, (Button helper)

 

Внутри head добавил

<script type="text/javascript">
    $(document).ready(function() {
    $(".fancyq").fancybox({
        prevEffect        : 'none',
        nextEffect        : 'none',
        closeBtn        : false,
        helpers        : {
            title    : { type : 'inside' },
            buttons    : {}
        }
    });
});
</script>

в файле product.tpl
во всех тегах img добавил class="fancyq", но не работает. Обычное модальное окно отображается, но при закрытии, картинки со страницы исчезают.

Link to comment
Share on other sites
Kerm Newbie

Kerm

Posted
Posted

Начнем с того что в Prestashop уже внедрен fancybox и в файлах уже стоит вызов этого окна, не зачем еще раз прописывать какой то класс и делать повторный вызов, то что Вы делаете полный бред. В файле product.js ищите код по слову  "fancybox" и туда уже по смыслу и с пониманием добавить согласно API вызов дополнительных функций скрипта.

  • Like 1
Link to comment
Share on other sites
yuazakharov Newbie

yuazakharov

Posted
  • Author
Posted (edited)

Начнем с того что в Prestashop уже внедрен fancybox и в файлах уже стоит вызов этого окна, не зачем еще раз прописывать какой то класс и делать повторный вызов, то что Вы делаете полный бред. В файле product.js ищите код по слову  "fancybox" и туда уже по смыслу и с пониманием добавить согласно API вызов дополнительных функций скрипта.

$('li:visible .fancybox, .fancybox.shown').fancybox({
        'hideOnContentClick': true,
        'openEffect'  : 'elastic',
        'closeEffect'  : 'elastic',
	helpers        : {
            title    : { type : 'inside' },
            buttons    : {}
        },
        wrapCSS: 'image-fancy',

После такого не работает. И в кавычке брать попробовал: 'helpers'

 

И так тоже:

'prevEffect'        : 'none',
        'nextEffect'        : 'none',
        'closeBtn'        : false,
		'helpers'        : {
            buttons    : {}
        },
        wrapCSS: 'image-fancy',
Edited by yuazakharov (see edit history)
Link to comment
Share on other sites
Kerm Newbie

Kerm

Posted
Posted (edited)

А скрипт отвечающий за кнопки подключил?

 

И в product.js должно быть так:

 

if (typeof(contentOnly) != 'undefined' && !contentOnly)
{
	if (!!$.prototype.fancybox)
		$('li:visible .fancybox, .fancybox.shown').fancybox({
			'hideOnContentClick': true,
			'openEffect'	: 'elastic',
			'closeEffect'	: 'elastic',
			helpers		: {
				title	: { type : 'inside' },
				buttons	: {}
			}
		});
}
Edited by Kerm (see edit history)
  • Like 1
Link to comment
Share on other sites
Kerm Newbie

Kerm

Posted
Posted

Нужно в файле ProductController.php, примерно на 37 строчке внутри функции "public function setMedia()" дописать, или сделать оверайд этой функции с необходимыми правками. Помни, если ты сделаешь это без оверайда, то со следующим обновлением эти правки сотрутся.
 
Заменить этот код:

 

        if (!$this->useMobileTheme()) {
            $this->addCSS(_THEME_CSS_DIR_.'product.css');
            $this->addCSS(_THEME_CSS_DIR_.'print.css', 'print');
            $this->addJqueryPlugin(array('fancybox', 'idTabs', 'scrollTo', 'serialScroll', 'bxslider'));
            $this->addJS(array(
                _THEME_JS_DIR_.'tools.js',  // retro compat themes 1.5
                _THEME_JS_DIR_.'product.js'
            ));
        } else {

На этот:

 

        if (!$this->useMobileTheme()) {
            $this->addCSS(_THEME_CSS_DIR_.'product.css');
            $this->addCSS(_THEME_CSS_DIR_.'print.css', 'print');
            $this->addJqueryPlugin(array('fancybox', 'idTabs', 'scrollTo', 'serialScroll', 'bxslider'));
            $this->addCSS(_THEME_JS_DIR_.'jquery/fancybox/helpers/jquery.fancybox-buttons.css');
            $this->addJS(array(
                _THEME_JS_DIR_.'tools.js',  // retro compat themes 1.5
                _THEME_JS_DIR_.'product.js',
                _THEME_JS_DIR_.'jquery/fancybox/helpers/jquery.fancybox-buttons.js'
            ));
        } else {

Далее, тебе нужно в твоей папке с темой, внутри папки "js" создать папку jquery/fancybox и положить внутрь созданной папки, папку helpers которую ты можешь взять из архива со скриптом fancybox скаченного с ихнего сайта.

Вот пример, где все работает как ты хочешь:

http://demo.prestashop24.ru/en/tshirts/1-faded-short-sleeves-tshirt.html

  • Like 1
Link to comment
Share on other sites
yuazakharov Newbie

yuazakharov

Posted
  • Author
Posted

Прикрепил файл для оверайда, его нужно закинуть в папку /override/controllers/front/

 

Далее нужно удалить этот файл:

 

/cache/class_index.php

Благодарю за подробнейшее описание что и как делать! Теперь работает как и хотел.

Link to comment
Share on other sites
Kerm Newbie

Kerm

Posted
Posted (edited)

По фэнсибоксу вроде ошибок нет

attachicon.gif1.jpg

 

 

Скорее всего речь идет о товаре, у которого 1 фотография.

Если посмотреть на то как скрипт работает, то можно понять что при клике на большое изображение товара, скрипт обращается к блоку с маленькими фотками товара, который находится под блоком с большой фоткой товара, далее он находит в этом списке нужную фотографию, соответствующую той, по которой кликнули, видит что эта мелкая фотка имеет ссылку и вытаскивает из нее эту ссылку на большое изображение и открывает его.

 

По скольку у товара всего 1 фотка, блока с дополнительными фотками товара нет и следовательно происходит то что происходит.

 

В product.tpl подправьте правило вывода этого блока, чтобы выводился если у товара не больше 1, а больше 0 фоток.

Edited by Kerm (see edit history)
Link to comment
Share on other sites
yuazakharov Newbie

yuazakharov

Posted
  • Author
Posted

Скорее всего речь идет о товаре, у которого 1 фотография.

Если посмотреть на то как скрипт работает, то можно понять что при клике на большое изображение товара, скрипт обращается к блоку с маленькими фотками товара, который находится под блоком с большой фоткой товара, далее он находит в этом списке нужную фотографию, соответствующую той, по которой кликнули, видит что эта мелкая фотка имеет ссылку и вытаскивает из нее эту ссылку на большое изображение и открывает его.

 

По скольку у товара всего 1 фотка, блока с дополнительными фотками товара нет и следовательно происходит то что происходит.

 

В product.tpl подправьте правило вывода этого блока, чтобы выводился если у товара не больше 1, а больше 0 фоток.

В товаре с несколькими фотками так же.

Оказывается не отображается только когда нажимаешь на фото большого размера, а на маленьких отображается.

Link to comment
Share on other sites
  • 10 months later...
way1 Apprentice

way1

Posted
Posted (edited)

Подскажите, пожалуйста, product.js надо менять одновременно с добавлением в override ProductController.php? Или это два варианта решения? Сорри за ламерский вопрос - я не программист.

Edited by way1 (see edit history)
Link to comment
Share on other sites
Kerm Newbie

Kerm

Posted
Posted

Подскажите, пожалуйста, product.js надо менять одновременно с добавлением в override ProductController.php? Или это два варианта решения? Сорри за ламерский вопрос - я не программист.

 

Смотря чего вы перезаписываете в файле ProductController.php, если что то новое выводите на карточке товара, то в файле product.js Вашей темы возможно нужно будет тоже дополнительно прописать вывод новых параметров.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...