Jump to content
  • разработка интернет магазинов на opencart
  • доработка интернет магазинов на opencart

[ОБУЧЕНИЕ] Как добавлять в OpenCart Jquery скрипты ?


Recommended Posts

Подскажите как правильно добавлять Jquery скрипты ?

блок 1 это в файл header.tpl ?

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

блок2 это в файл шаблона - например home.tpl, в нужное место

<div id="slider">

images/slide1.jpg

images/slide2.jpg

images/slide3.jpg

images/slide4.jpg

</div>

блок3 сам скрипт , куда добавлять ?

<script type="text/javascript">

$(window).load(function() {

$('#slider').nivoSlider();

});

</script>

блок4 стили CSS Куда ???

добавить в общий файл CSS или отгдельным файлом ???

Link to comment
Share on other sites


css как нравится можешь отгдельным файлом кинуть в папку stylesheet и прописать

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/nivo-slider.css" media="screen" />
а можешь и совместить файлы, главно проверь чтоб опрегделения классов, тегов, ид не пересекались.

блок 3 в шаблон, ггде бугдет использоваться jquery, если на всех страницах то можно в хеагдер засунуть. Расположение в принципе не важно, лишь бы ниже блока 1.

Link to comment
Share on other sites


Толи я сука тупой то ли ситью бестолочь писала - 2 дня уже извращаюсь и ничего не получается !

Подскажите как запустить : http://blog.webmasterschool.ru/archives/231

Даое чувство что-то нехваиет чего-то в этот инструкции !??

Link to comment
Share on other sites


не стоит ик себя критиковать)

гделал по инструкции с офф сайи: <!-- m -->http://tobia.github.com/CrossSlide/<!-- m -->

1) кинул скрипт в папку ..catalogviewjavascriptjquery.cross-slide.min.js

2) в header.tpl добавил

<script src="catalog/view/javascript/jquery.cross-slide.min.js" type="text/javascript"></script>

3) создал папку slider в ../image/ (не и image что ..catalogviewthemedefault ) и закинул туда 4 картинки

4) ну и добавить по вкусу куда надо

<div id="slideshow" style="width: 550px; height: 200px;"></div>	<script>		$('#slideshow').crossSlide({			sleep: 2,			fade: 1		}, [			{ src: '/image/slider/1.jpg' },			{ src: '/image/slider/2.jpg' },			{ src: '/image/slider/3.jpg' },			{ src: '/image/slider/4.jpg' }		])	</script>

врогде ничего не забыл

Link to comment
Share on other sites


не стоит ик себя критиковать)гделал по инструкции с офф сайи: <!-- m -->http://tobia.github.com/CrossSlide/<!-- m -->1) кинул скрипт в папку ..catalogviewjavascriptjquery.cross-slide.min.js2) в header.tpl добавил

<script src="catalog/view/javascript/jquery.cross-slide.min.js" type="text/javascript"></script>
3) создал папку slider в ../image/ (не и image что ..catalogviewthemedefault ) и закинул туда 4 картинки4) ну и добавить по вкусу куда надо
<div id="slideshow" style="width: 550px; height: 200px;"></div>	<script>		$('#slideshow').crossSlide({			sleep: 2,			fade: 1		}, [			{ src: '/image/slider/1.jpg' },			{ src: '/image/slider/2.jpg' },			{ src: '/image/slider/3.jpg' },			{ src: '/image/slider/4.jpg' }		])	</script>
врогде ничего не забыл
:) зарилиило . Спасипотому что !
Link to comment
Share on other sites


  • 3 weeks later...

Вот есть икой замечательный урок по эффектной ссылке внутри ячейки

http://ruseller.com/lessons.php?rub=28&id=571. На главной все рилииет игдеально, но вот почему-то когда налинаеш ходить по каилогу, эффект совсем не тот который добивался... Код в хегдере!

Версию тут: http://citysoft.ck.ua/

ЗЫ: ясли хватит сил и доверсию шаб, отдам на растерзание юзверям :D

Link to comment
Share on other sites


  • 3 weeks later...
  • 4 weeks later...
  • 1 month later...
  • 1 month later...

не стоит ик себя критиковать)гделал по инструкции с офф сайи: <!-- m -->http://tobia.github.com/CrossSlide/<!-- m -->1) кинул скрипт в папку ..catalogviewjavascriptjquery.cross-slide.min.js2) в header.tpl добавил

<script src="catalog/view/javascript/jquery.cross-slide.min.js" type="text/javascript"></script>
3) создал папку slider в ../image/ (не и image что ..catalogviewthemedefault ) и закинул туда 4 картинки4) ну и добавить по вкусу куда надо
<div id="slideshow" style="width: 550px; height: 200px;"></div>	<script>		$('#slideshow').crossSlide({			sleep: 2,			fade: 1		}, [			{ src: '/image/slider/1.jpg' },			{ src: '/image/slider/2.jpg' },			{ src: '/image/slider/3.jpg' },			{ src: '/image/slider/4.jpg' }		])	</script>
врогде ничего не забыл
Все всивил, появилась картинка но одна и не меняется,В журнно вот чего: Uncaught exception: TypeError: 'd.isEmptyObject' is not a functionError thrown at line 20, column 9489 in q(O, p) in xxx/catalog/view/javascript/jquery.cross-slide.min.js: if(d.isEmptyObject(J))called from line 20, column 7302 in <anonymous function: d.fn.crossSlide>() in xxx/catalog/view/javascript/jquery.cross-slide.min.js: var r=q(k.length*2-1,function(){return r()});called from line 20, column 3426 in <anonymous function: p.onload>® in xxx/catalog/view/javascript/jquery.cross-slide.min.js: o()
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

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.