Новости Joomla

Вывод списка материалов Joomla с разделением по годам и месяцам. Переопределение модуля Материалы (mod_articles).

Эта новость представляет собой перевод и дополнение статьи Брайана Тимана (Brian Teeman) - сооснователя Joomla - о доработке модуля "Материалы" (mod_articles). Цель этой доработки — выводить заголовки материалов из определённых категорий с группировкой по годам и месяцам, создавая удобный архивный вид, схожий с "Blog Role" в WordPress. Примером такой реализации можно видеть на сайте самого Брайана.

Вышли релизы безопасности Joomla 6.0.2 и Joomla 5.4.2

Релиз безопасности Joomla 6.0.2 и 5.4.2

Проект Joomla спешит сообщить о выпуске Joomla 6.0.2 и Joomla 5.4.2. Это релиз безопасности для серии Joomla 6.0 и релиз безопасности для серии Joomla 5.4.

Обновление Joomlaportal.ru

Обновление Joomlaportal.ru

Рады сообщить о значительном обновлении старейшего ресурса по Joomla в рунете.

Есть традиция: каждые три версии Joomla мы меняем дизайн на сайте. С выходом Joomla 6 мы решили обновить оформление, а заодно пересмотреть концепцию портала.

1 2 3  Все   Вниз
0 Пользователей и 1 Гость просматривают эту тему.
  • 66 Ответов
  • 8351 Просмотров
*

rockettboost

  • Захожу иногда
  • 383
  • 3 / 5
jQuery - подключение .
« : 01.05.2011, 15:10:06 »
С праздником товарищи !

Решил вот познакомиться с jquery , но как и все начинающие имею тонну вопросов .

Объясните , пожалуйста , как правильно подключить библиотеку ( с этим кажется разобрался  )
<script type="text/javascript" src="<?php echo $this->baseurl ?>/js/jquery.js"></script>

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

Знаю что всё просто , и потом буду улыбаться когда кто-то спросит подобное .)))
Записан
*

rockettboost

  • Захожу иногда
  • 383
  • 3 / 5
Re: jQuery - подключение .
« Ответ #1 : 01.05.2011, 15:12:41 »
Пробую вставлять код прямо в статью между теками <script> </script>

но появляется вот такое  // <![CDATA[ ? и весь код комментируется .
Записан
*

rockettboost

  • Захожу иногда
  • 383
  • 3 / 5
Re: jQuery - подключение .
« Ответ #2 : 01.05.2011, 15:33:44 »
ау , что никто ничего не посоветует ?
Записан
*

sharp

  • Завсегдатай
  • 1173
  • 97 / 2
Re: jQuery - подключение .
« Ответ #3 : 01.05.2011, 15:45:49 »
в чем проблема пиши прямой путь!
<script type="text/javascript" src="/js/jquery.js"></script>
сам скрипт положи в папку твой_сайт/js/jquery.js
Записан
Хочешь знать правду!? читай таблицу умножения.
Поисковое продвижение или раскрутка сайта!
*

rockettboost

  • Захожу иногда
  • 383
  • 3 / 5
Re: jQuery - подключение .
« Ответ #4 : 01.05.2011, 15:52:47 »
Цитата: sharp от 01.05.2011, 15:45:49
в чем проблема пиши прямой путь!
<script type="text/javascript" src="/js/jquery.js"></script>
сам скрипт положи в папку твой_сайт/js/jquery.js

О , а можно поподробне , а  то пока вообще ничего не понимаю .

Я скачал библиотеку jquery и положил её в корень сайта /js/jquery.js
Потом подключил в шаблоне .  <script language="JavaScript" type="text/javascript" src="<?php echo $this->baseurl ?>/js/jquery.js"></script>

и что дальше : допустим скачал вот такой код

function simple_tooltip(target_items, name){
$(target_items).each(function(i){
$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
var my_tooltip = $("#"+name+i);

$(this).removeAttr("title").mouseover(function(){
my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);
}).mousemove(function(kmouse){
my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
}).mouseout(function(){
my_tooltip.fadeOut(400);
});
});
}
$(document).ready(function(){
simple_tooltip("a","tooltip");
});

и как его вставить ?
делать новый js документ или вставлять в HTML ?
Записан
*

sharp

  • Завсегдатай
  • 1173
  • 97 / 2
Re: jQuery - подключение .
« Ответ #5 : 01.05.2011, 15:57:27 »
вставлять его в index.php файл твоего шаблона
Записан
Хочешь знать правду!? читай таблицу умножения.
Поисковое продвижение или раскрутка сайта!
*

DaVinchy

  • Захожу иногда
  • 326
  • 42 / 3
Re: jQuery - подключение .
« Ответ #6 : 01.05.2011, 15:58:08 »
вставяешь в HTML, заключив в тег script
Записан
*

sharp

  • Завсегдатай
  • 1173
  • 97 / 2
Re: jQuery - подключение .
« Ответ #7 : 01.05.2011, 15:58:13 »
Записан
Хочешь знать правду!? читай таблицу умножения.
Поисковое продвижение или раскрутка сайта!
*

rockettboost

  • Захожу иногда
  • 383
  • 3 / 5
Re: jQuery - подключение .
« Ответ #8 : 01.05.2011, 16:00:13 »
Цитата: sharp от 01.05.2011, 15:57:27
вставлять его в index.php файл твоего шаблона

я на видео смотрел , Попов его вставлял прямо в статью , но у меня ничего не выходит .

Ну это код ещё маленький , а если в 50 раз больше , что загадить index.php ?
И ли сделать js файл , кинуть его в папку js и подключить в index ?
Записан
*

rockettboost

  • Захожу иногда
  • 383
  • 3 / 5
Re: jQuery - подключение .
« Ответ #9 : 01.05.2011, 16:01:39 »
Цитата: sharp от 01.05.2011, 15:58:13
http://ruseller.com/adds.php?rub=&id=1694

Вот вот , всё так и делаю , но после обновления страницы в HTML стать (куда пишу код) появляется следующее // <![CDATA[ ?
Записан
*

sharp

  • Завсегдатай
  • 1173
  • 97 / 2
Re: jQuery - подключение .
« Ответ #10 : 01.05.2011, 16:02:03 »
гадить
Записан
Хочешь знать правду!? читай таблицу умножения.
Поисковое продвижение или раскрутка сайта!
*

sharp

  • Завсегдатай
  • 1173
  • 97 / 2
Re: jQuery - подключение .
« Ответ #11 : 01.05.2011, 16:03:27 »
возьми любой исхдник на сайте попова с использованием jQuery и сделай по аналогии, не понимаю какие там еще могут быть проблемы все очень просто!
Записан
Хочешь знать правду!? читай таблицу умножения.
Поисковое продвижение или раскрутка сайта!
*

rockettboost

  • Захожу иногда
  • 383
  • 3 / 5
Re: jQuery - подключение .
« Ответ #12 : 01.05.2011, 16:05:23 »
Цитата: sharp от 01.05.2011, 16:03:27
возьми любой исхдник на сайте попова с использованием jQuery и сделай по аналогии, не понимаю какие там еще могут быть проблемы все очень просто!

да знаю что всё просто , только со временем а не с первого раза ))
ладно буду ковыряться ...
Записан
*

rockettboost

  • Захожу иногда
  • 383
  • 3 / 5
Re: jQuery - подключение .
« Ответ #13 : 01.05.2011, 16:08:50 »
http://ruseller.com/lessons.php?rub=32&id=530

ну вот допустим , HTML вставить в статю
                         CSS тоже понятно .
           а код jquery в отдельный файл и в корень сайта или как ?
Записан
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: jQuery - подключение .
« Ответ #14 : 01.05.2011, 16:10:00 »
А чем там еще пОпов занимался?гг
Записан
*

rockettboost

  • Захожу иногда
  • 383
  • 3 / 5
Re: jQuery - подключение .
« Ответ #15 : 01.05.2011, 16:11:14 »
Цитата: al-teen от 01.05.2011, 16:10:00
А чем там еще пОпов занимался?гг

это к чему ?
Записан
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: jQuery - подключение .
« Ответ #16 : 01.05.2011, 16:11:57 »
Код
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" ></script>
Записан
*

rockettboost

  • Захожу иногда
  • 383
  • 3 / 5
Re: jQuery - подключение .
« Ответ #17 : 01.05.2011, 16:13:54 »
Цитата: al-teen от 01.05.2011, 16:11:57
Код
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" ></script>

фух , это через Google подключение ?
Записан
*

rockettboost

  • Захожу иногда
  • 383
  • 3 / 5
Re: jQuery - подключение .
« Ответ #18 : 01.05.2011, 16:18:33 »
http://ruseller.com/lessons.php?rub=32&id=530

Из этого урока скачал исходники , там картинки и файл jquery.js

и что с ним делать ?
У меня с таким названием библиотека .
Блин запутался ))))))

Извините , за тупые вопросы , но серьзно не въезжаю )
Записан
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: jQuery - подключение .
« Ответ #19 : 01.05.2011, 16:19:41 »
Через него. Причем уже сжатый гуглокомпрессором.
Записан
*

sharp

  • Завсегдатай
  • 1173
  • 97 / 2
Re: jQuery - подключение .
« Ответ #20 : 01.05.2011, 16:21:11 »
Смотри сюда это в файле index.php
Код
<head>

....
...
...
<script type="text/javascript" charset="utf-8" src='js/jquery.js'></script>
	<script type="text/javascript" charset="utf-8">
		$(window).load(function(){
			
			//set and get some variables
			var thumbnail = {
				imgIncrease : 100, /* the image increase in pixels (for zoom) */
				effectDuration : 400, /* the duration of the effect (zoom and caption) */
				/* 
				get the width and height of the images. Going to use those
				for 2 things:
					make the list items same size
					get the images back to normal after the zoom 
				*/
				imgWidth : $('.thumbnailWrapper ul li').find('img').width(), 
				imgHeight : $('.thumbnailWrapper ul li').find('img').height() 
				
			};
			
			//make the list items same size as the images
			$('.thumbnailWrapper ul li').css({ 
				
				'width' : thumbnail.imgWidth, 
				'height' : thumbnail.imgHeight 
				
			});
			
			//when mouse over the list item...
			$('.thumbnailWrapper ul li').hover(function(){
				
				$(this).find('img').stop().animate({
					
					/* increase the image width for the zoom effect*/
					width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
					/* we need to change the left and top position in order to 
					have the zoom effect, so we are moving them to a negative
					position of the half of the imgIncrease */
					left: thumbnail.imgIncrease/2*(-1),
					top: thumbnail.imgIncrease/2*(-1)
					
				},{ 
					
					"duration": thumbnail.effectDuration,
					"queue": false
					
				});
				
				//show the caption using slideDown event
				$(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);
				
			//when mouse leave...
			}, function(){
				
				//find the image and animate it...
				$(this).find('img').animate({
					
					/* get it back to original size (zoom out) */
					width: thumbnail.imgWidth,
					/* get left and top positions back to normal */
					left: 0,
					top: 0
					
				}, thumbnail.effectDuration);
				
				//hide the caption using slideUp event
				$(this).find('.caption').slideUp(thumbnail.effectDuration);
				
			});
			
		});
	</script>
	<style type="text/css" media="screen">
		body { background-color:#292929; color:white;text-align:center; font-family: 'georgia'; font-size: 13px; } /* not important */
		.thumbnailWrapper { width:600px; margin:0px auto; } /* not important */
		
		.thumbnailWrapper ul { 
			list-style-type: none; /* remove the default style for list items (the circles) */ 
			margin:0px; /* remove default margin */
			padding:0px; /* remove default padding */
		}
		.thumbnailWrapper ul li { 
			float:left; /* important: left float */
			position:relative; /* so we can use top and left positioning */
			overflow:hidden; /* hide the content outside the boundaries (ZOOM) */
		}
		.thumbnailWrapper ul li a img { 
			width:200px; /* not important, the pics we use here are too big */
			position:relative; /* so we can use top and left positioning */
			border:none; /* remove the default blue border */
		}
		.caption{
			position:absolute; /* needed for positioning */
			bottom:0px; /* bottom of the list item (container) */
			left:0px; /* start from left of the list item (container) */
			width:100%; /* stretch to the whole width of container */
			display:none; /* hide by default */
			/* styling bellow */
			background:#0c4b62;
			color:white;
			opacity:0.9;
		}
		.caption .captionInside{
			/* just styling */
			padding:10px;
			margin:0px;
		}
		.clear { clear:both; } /* to clear the float after the last item */
	</style>
</head>
Записан
Хочешь знать правду!? читай таблицу умножения.
Поисковое продвижение или раскрутка сайта!
*

rockettboost

  • Захожу иногда
  • 383
  • 3 / 5
Re: jQuery - подключение .
« Ответ #21 : 01.05.2011, 16:26:03 »
Цитата: sharp от 01.05.2011, 16:21:11
Смотри сюда это в файле index.php
Код
<head>

....
...
...
<script type="text/javascript" charset="utf-8" src='js/jquery.js'></script>
	<script type="text/javascript" charset="utf-8">
		$(window).load(function(){
			
			//set and get some variables
			var thumbnail = {
				imgIncrease : 100, /* the image increase in pixels (for zoom) */
				effectDuration : 400, /* the duration of the effect (zoom and caption) */
				/* 
				get the width and height of the images. Going to use those
				for 2 things:
					make the list items same size
					get the images back to normal after the zoom 
				*/
				imgWidth : $('.thumbnailWrapper ul li').find('img').width(), 
				imgHeight : $('.thumbnailWrapper ul li').find('img').height() 
				
			};
			
			//make the list items same size as the images
			$('.thumbnailWrapper ul li').css({ 
				
				'width' : thumbnail.imgWidth, 
				'height' : thumbnail.imgHeight 
				
			});
			
			//when mouse over the list item...
			$('.thumbnailWrapper ul li').hover(function(){
				
				$(this).find('img').stop().animate({
					
					/* increase the image width for the zoom effect*/
					width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
					/* we need to change the left and top position in order to 
					have the zoom effect, so we are moving them to a negative
					position of the half of the imgIncrease */
					left: thumbnail.imgIncrease/2*(-1),
					top: thumbnail.imgIncrease/2*(-1)
					
				},{ 
					
					"duration": thumbnail.effectDuration,
					"queue": false
					
				});
				
				//show the caption using slideDown event
				$(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);
				
			//when mouse leave...
			}, function(){
				
				//find the image and animate it...
				$(this).find('img').animate({
					
					/* get it back to original size (zoom out) */
					width: thumbnail.imgWidth,
					/* get left and top positions back to normal */
					left: 0,
					top: 0
					
				}, thumbnail.effectDuration);
				
				//hide the caption using slideUp event
				$(this).find('.caption').slideUp(thumbnail.effectDuration);
				
			});
			
		});
	</script>
	<style type="text/css" media="screen">
		body { background-color:#292929; color:white;text-align:center; font-family: 'georgia'; font-size: 13px; } /* not important */
		.thumbnailWrapper { width:600px; margin:0px auto; } /* not important */
		
		.thumbnailWrapper ul { 
			list-style-type: none; /* remove the default style for list items (the circles) */ 
			margin:0px; /* remove default margin */
			padding:0px; /* remove default padding */
		}
		.thumbnailWrapper ul li { 
			float:left; /* important: left float */
			position:relative; /* so we can use top and left positioning */
			overflow:hidden; /* hide the content outside the boundaries (ZOOM) */
		}
		.thumbnailWrapper ul li a img { 
			width:200px; /* not important, the pics we use here are too big */
			position:relative; /* so we can use top and left positioning */
			border:none; /* remove the default blue border */
		}
		.caption{
			position:absolute; /* needed for positioning */
			bottom:0px; /* bottom of the list item (container) */
			left:0px; /* start from left of the list item (container) */
			width:100%; /* stretch to the whole width of container */
			display:none; /* hide by default */
			/* styling bellow */
			background:#0c4b62;
			color:white;
			opacity:0.9;
		}
		.caption .captionInside{
			/* just styling */
			padding:10px;
			margin:0px;
		}
		.clear { clear:both; } /* to clear the float after the last item */
	</style>
</head>

а картинки просто залить в корень , или нужно что-то им указать ?
Записан
*

rockettboost

  • Захожу иногда
  • 383
  • 3 / 5
Re: jQuery - подключение .
« Ответ #22 : 01.05.2011, 16:30:44 »
всавил код в index.php

картинки загрузил в корень сайта , и вставил их в статью , но ничего не происходит .
Записан
*

sharp

  • Завсегдатай
  • 1173
  • 97 / 2
Re: jQuery - подключение .
« Ответ #23 : 01.05.2011, 16:32:49 »
а чать <body> добавил ?
Код
<body>
	<h4>ДЕМО</h4>
	<!-- start thumbnailWrapper div -->
	<div class='thumbnailWrapper'>
		<!-- start unordered list -->
		<ul>
			<li>
				<a href='#'><img src='images/1.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>CofeeNerd</p>
				</div>
			</li>
			<li>............................
Записан
Хочешь знать правду!? читай таблицу умножения.
Поисковое продвижение или раскрутка сайта!
*

rockettboost

  • Захожу иногда
  • 383
  • 3 / 5
Re: jQuery - подключение .
« Ответ #24 : 01.05.2011, 16:35:56 »
Цитата: sharp от 01.05.2011, 16:32:49
а чать <body> добавил ?
Код
<body>
	<h4>ДЕМО</h4>
	<!-- start thumbnailWrapper div -->
	<div class='thumbnailWrapper'>
		<!-- start unordered list -->
		<ul>
			<li>
				<a href='#'><img src='images/1.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>CofeeNerd</p>
				</div>
			</li>
			<li>............................

б...ть не понимаю ни чего (
Записан
*

rockettboost

  • Захожу иногда
  • 383
  • 3 / 5
Re: jQuery - подключение .
« Ответ #25 : 01.05.2011, 16:42:59 »
не понимаю зачем в head CSS пихать ?
Записан
*

rockettboost

  • Захожу иногда
  • 383
  • 3 / 5
Re: jQuery - подключение .
« Ответ #26 : 01.05.2011, 16:45:09 »
Если не трудно ,
можно с самого начала , как и что , и лёгенький пример , что бы видно было что всё работает ?
Записан
*

sharp

  • Завсегдатай
  • 1173
  • 97 / 2
Re: jQuery - подключение .
« Ответ #27 : 01.05.2011, 17:06:36 »
подлючаем библиотеку в  <head>
Код
<script type="text/javascript" charset="utf-8" src='js/jquery.js'></script>
добавляем скрипт туда же в <head>
Код
<script type="text/javascript" charset="utf-8">
		$(window).load(function(){
			
			//set and get some variables
			var thumbnail = {
				imgIncrease : 100, /* the image increase in pixels (for zoom) */
				effectDuration : 400, /* the duration of the effect (zoom and caption) */
				/*
итд..
в <body> добвляем контент с которрему применяются скрипты
и все!
 в примере CSS добавлен в index.php для простоты. у тебя это отдельный файл
Записан
Хочешь знать правду!? читай таблицу умножения.
Поисковое продвижение или раскрутка сайта!
*

rockettboost

  • Захожу иногда
  • 383
  • 3 / 5
Re: jQuery - подключение .
« Ответ #28 : 01.05.2011, 17:19:18 »
Цитата: sharp от 01.05.2011, 17:06:36
подлючаем библиотеку в  <head>
Код
<script type="text/javascript" charset="utf-8" src='js/jquery.js'></script>
добавляем скрипт туда же в <head>
Код
<script type="text/javascript" charset="utf-8">
		$(window).load(function(){
			
			//set and get some variables
			var thumbnail = {
				imgIncrease : 100, /* the image increase in pixels (for zoom) */
				effectDuration : 400, /* the duration of the effect (zoom and caption) */
				/*
итд..
в <body> добвляем контент с которрему применяются скрипты
и все!
 в примере CSS добавлен в index.php для простоты. у тебя это отдельный файл


уррра ! получилось )))
по видеоуроку Попова , вчера видно ошибку сделал .
а у тебя вижу подключение отличается <script type="text/javascript" charset="utf-8" src='js/jquery.js'></script>
у меня так <script type="text/javascript" src="<?php echo $this->baseurl ?>/js/jquery.js"></script>

это без разницы ?

и ещё хотел спросить , можно же просто вставлять скрипты в статьи как на видео , да ?
Записан
*

sharp

  • Завсегдатай
  • 1173
  • 97 / 2
Re: jQuery - подключение .
« Ответ #29 : 01.05.2011, 17:23:51 »
Цитата: rockettboost от 01.05.2011, 17:19:18
а у тебя вижу подключение отличается <script type="text/javascript" charset="utf-8" src='js/jquery.js'></script>
у меня так <script type="text/javascript" src="<?php echo $this->baseurl ?>/js/jquery.js"></script>

это без разницы ?

и ещё хотел спросить , можно же просто вставлять скрипты в статьи как на видео , да ?
1.разница есть но работать будет )
2.да
Записан
Хочешь знать правду!? читай таблицу умножения.
Поисковое продвижение или раскрутка сайта!
1 2 3  Все   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Подскажите по совместимости jquery

Автор M60aut

 Ответов: 0
Просмотров: 1360 		Последний ответ 10.02.2017, 11:05:05
от M60aut
Подключение jQuery к Joomla 1.5

Автор Sergei_Han

 Ответов: 1
Просмотров: 1703 		Последний ответ 23.04.2015, 14:23:31
от kik84
Очень нужно дописать модуль RAXO-ALL-MODE. Дополнить методом jquery для выведения кнопки "ещё новост

Автор kovalenko

 Ответов: 10
Просмотров: 3755 		Последний ответ 19.06.2013, 14:17:15
от Darkling
Отключение jquery на сайте

Автор Nazaretto

 Ответов: 6
Просмотров: 2209 		Последний ответ 21.04.2013, 03:01:56
от Nazaretto
CSS 3 Pie подключение к Joomla

Автор MaBudda

 Ответов: 25
Просмотров: 15688 		Последний ответ 31.03.2013, 00:13:30
от i-grek