Форум

razorg1991 · #1 (**permalink**) 27.03.2014, 11:18

Подключаю плагин bgstretcher, все по инструкции. В индексном файле идет такое подключение в <head>

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/swfobject.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/bgstretcher.js"></script>

Да это Joomla шаблон! (самописный, не скачанный)

Инициализирую здесь же в <head> сразу после подключения скриптов

<script>

	$(document).ready(function(){
	
        //  Initialize Backgound Stretcher	   
		$('BODY').bgStretcher({
			images: ['images/background1.jpg', 'images/background2.jpg', 'images/background3.jpg', 'images/background4.jpg'], 
			slideDirection: 'N',
            maxWidth: 'auto',
            maxHeight: 'auto',
            nextSlideDelay: 7000,
			slideShowSpeed: 2000,
			transitionEffect: 'fade',
			sequenceMode: 'normal',
			buttonPrev: '#prev',
			buttonNext: '#next',
			pagination: '#nav',
			anchoring: 'left center',
			anchoringImg: 'left center'
		});	
	});
    
</script>

Ничего не происходит (хотя фон уже должен стать слайдером)

Смотрю в firebag выдает такую ошибку

TypeError: $ is not a function
	
$('BODY').bgStretcher({

До этого, когда был только один HTML каркас все работало замечательно.
Подключал и Jquery 1.5.2 (что идет в коробке с плагином) и 1.9.1 с плагином миграции, не хочет работать!
Кроме этих скриптов больше ничего не подключается (поотключал все что можно было, чтобы не было конфликтов).
Помогите пожалуйста!

nice_try · #2 (**permalink**) 27.03.2014, 11:21

не видит jquery, подключай через cdn и забудь о подобных проблемах
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
юзай jQuery вместо $

razorg1991 · #3 (**permalink**) 27.03.2014, 22:43

Не работает все равно

рони · #4 (**permalink**) 27.03.2014, 23:11

razorg1991,
$ перехватывает другая библиотека

сначала грузиться jQuery потом jQuery.noConflict() потом jQuery(document).ready с вашим кодом затем mootools
JQuery and SSL

razorg1991 · #5 (**permalink**) 27.03.2014, 23:27

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

razorg1991,
$ перехватывает другая библиотека

сначала грузиться jQuery потом jQuery.noConflict() потом jQuery(document).ready с вашим кодом затем mootools
JQuery and SSL

Так я не гружу mootools вообще зачем мне тогда jQuery.noConflict() ?
И между чем мне еще грузить подключение плагина?

рони · #6 (**permalink**) 27.03.2014, 23:44

razorg1991,
если у вас всё правильно тогда куда делось jQuery ?

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://www.w3blender.com/codecanyon/bgstretcher/bgstretcher/js/jquery-bgstretcher-3.1.2.min.js"></script>
<script>
	$(document).ready(function(){
       //  Initialize Backgound Stretcher
		$('body').bgStretcher({
			images: ['http://www.w3blender.com/codecanyon/bgstretcher/sample-images/sample-2.jpg', "http://www.w3blender.com/codecanyon/bgstretcher/sample-images/sample-1.jpg"],
			slideDirection: 'N',
            maxWidth: 'auto',
            maxHeight: 'auto',
            nextSlideDelay: 7000,
			slideShowSpeed: 2000,
			transitionEffect: 'fade',
			sequenceMode: 'normal',
			buttonPrev: '#prev',
			buttonNext: '#next',
			pagination: '#nav',
			anchoring: 'left center',
			anchoringImg: 'left center'
		});
	});
</script>

</head>

<body>
</body>

</html>

razorg1991 · #7 (**permalink**) 28.03.2014, 00:07

Поубирал все что подключал ранее и просто тупо вставил вот этот код демонстрации.

Результат тот же

TypeError: $ is not a function
	

$('body').bgStretcher({

Это пипец! Это не поддается никакой логике!

Короче придется на чистом js

рони · #8 (**permalink**) 28.03.2014, 00:20

razorg1991,
скинь ссылку - можно в личку

razorg1991 · #9 (**permalink**) 28.03.2014, 00:29

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

razorg1991,
скинь ссылку - можно в личку

Да пока еще сайт на локалке, в общем решил забить на плагины!
Спасибо за помощь! Спасибо за скрипт в этой теме

Работает, НО не могли бы ли Вы помочь допилить его? Хотелось бы еще добавить плавную смену картинок, И заметил такую особенность: когда загружается страница, то первая картинка появляется не сразу, а только через указанное время для смены картинок

var interval = 7000

Т.е. сейчас скрипт выглядит так

<script>
        (function(){
            var interval = 7000,
                pictures = [
                    '/bs-server/templates/bs-template/images/background1.jpg',
                    '/bs-server/templates/bs-template/images/background2.jpg',
                    '/bs-server/templates/bs-template/images/background3.jpg',
                    '/bs-server/templates/bs-template/images/background4.jpg'
                ];
            
            for (var i = 0; i < pictures.length; i++) {
                (new Image()).src = pictures[i];
            }
            
            var imageIndex = 0;
            setInterval(function(){
                var image = pictures[imageIndex++] || pictures[imageIndex = 0];
                if (document.addEventListener) {
                    document.body.style.backgroundImage = 'url('+ image + ')';
                } else {
                    document.body.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + image + ', sizingMethod="scale")';
                }
            }, interval);
        })();
        </script>

рони · #10 (**permalink**) 28.03.2014, 00:36

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

когда загружается страница, то первая картинка появляется не сразу, а только через указанное время для смены картинок

пропишите первую картинку в css http://htmlbook.ru/css/background-image

Форум

Справочник

Discord чат

Курсы javascript