Слайдер

promoderator · 2013-02-12 12:52:01

А можно как-то сделать на определенной странице слайдер, который будет отображать фотографии из определенной папки например?

или, как вариант, можно ли сделать еще одну страницу с добавлением новостей?
т.е. чтобы на главную страницу выводились статьи, а была еще одна страница, например "фото", где по принципу добавления новостей добавлялись бы фотки

но больше интересен слайдер..

как это реализовать, подскажите, пожалуйста, нубу..)

Vnerehte · 2013-02-12 21:45:31

может это подойдетhttp://ngcms.ru/forum/viewtopic.php?id=2999

Изменено Vnerehte (2013-02-12 21:47:30)

irbees2008 · 2013-02-12 21:45:52

В интернете много слайдеров найди себе подходящий
посмотри здесь http://yeap.narod.ru/js/022.html

Изменено irbees2008 (2013-02-12 21:48:16)

Vnerehte · 2013-02-12 21:47:00

Ещё можно попробовать взять слайдер из этого шаблона http://ngcms.ru/forum/viewtopic.php?id=2661
переделать под себя, под свой шаблон

Изменено Vnerehte (2013-02-12 21:47:20)

promoderator · 2013-02-13 00:47:41

irbees2008, там я смотрел и даже нашел)
но скачав я не понял как его установить) нуб))
там папка css, images, js и файл index.html
а куда это все засунуть я не понял.. =\

irbees2008 · 2013-02-13 07:10:48

какой выбрал?

promoderator · 2013-02-13 13:26:19

irbees2008, CircleNavigationEffect

irbees2008 · 2013-02-13 18:27:21

я не нашел,номер какой?

promoderator · 2013-02-13 22:28:36

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

irbees2008 · 2013-02-14 08:23:21

1 заливаешь все три папки или в корень сайта
2 открываешь файл main.tpl и в шапку добавляешь между хеад

<link rel="stylesheet" type="text/css" href="css/style.css" />
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
		<script type="text/javascript" src="js/jquery.slideshow.js"></script>
        <script type="text/javascript">
            $(function() {
				$('#cn-slideshow').slideshow();
            });
        </script>
      
		<script id="barTmpl" type="text/x-jquery-tmpl">
            <div class="cn-bar">
                <div class="cn-nav">
					<a href="#" class="cn-nav-prev">
                        <span>Previous</span>
						<div style="background-image:url(${prevSource});"></div> 
					</a>
					<a href="#" class="cn-nav-next">
                        <span>Next</span>
						<div style="background-image:url(${nextSource});"></div>
					</a>
                </div><!-- cn-nav -->
                <div class="cn-nav-content">
                    <div class="cn-nav-content-prev">
                        <span>Previous image</span>
                        <h3>${prevTitle}</h3>
                    </div>
                    <div class="cn-nav-content-current">
                        <span>Currently viewing</span>
                        <h2>${currentTitle}</h2>
                    </div>
                    <div class="cn-nav-content-next">
                        <span>Next image</span>
                        <h3>${nextTitle}</h3>
                    </div>
                </div><!-- cn-nav-content -->
            </div><!-- cn-bar -->
		</script>

и где хочешь вставить слайдер

<div id="cn-slideshow" class="cn-slideshow">
                    <div class="cn-images">
                        <img src="images/large/1.jpg" alt="image01" title="Beautiful Scenery 1" data-thumb="images/thumbs/1.jpg" style="display:block;"/>
                        <img src="images/large/2.jpg" alt="image02" title="Beautiful Scenery 2" data-thumb="images/thumbs/2.jpg"/>
                        <img src="images/large/3.jpg" alt="image03" title="Beautiful Scenery 3" data-thumb="images/thumbs/3.jpg"/>
                        <img src="images/large/4.jpg" alt="image04" title="Beautiful Scenery 4" data-thumb="images/thumbs/4.jpg"/>
                    </div><!-- cn-images -->
                </div>

в папку images заливаешь картинки и прописываешь пути в слайдере типа так

<img src="images/large/твоя картинка.jpeg" alt="твоя картинка.jpeg" title="твоя картинка.jpeg" data-thumb="твоя картинка.jpeg"/>

vl · 2013-02-14 14:22:49

irbees2008, если б в слайдер вставлять картинки не с относительнім адресом

 "images/large/2.jpg"

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

Изменено vl (2013-02-14 14:26:25)

irbees2008 · 2013-02-14 18:47:52

vl,как прописать адрес поймет и новичок,а дальше подлючить xfields ,просто об этом еще вопроса не было

Изменено irbees2008 (2013-02-14 18:49:35)

promoderator · 2013-02-14 20:07:18

irbees2008, большое спасибо, что-то начало получаться)

promoderator · 2013-02-14 20:34:00

irbees2008, а как по ширине сделать его меньше? вылазит за границу столбца...
не подскажете?

irbees2008 · 2013-02-14 20:39:42

в папке стилей которая шла с слайдером в фаиле style.css строка 2

width: 820px;

измени под себя

promoderator · 2013-02-14 21:07:17

irbees2008, еще раз большое спасибо!)

promoderator · 2013-02-15 14:45:25

Еще вопрос: у меня в слайдер в планах запихать кучу фоток. Если сделаю, как хочу - будет дико тормозить. Один код по длине чего стоить будет..
Можно сделать как-то, чтобы указать путь на папку, а для отображения берется любой файл из этой папки рандомно?
хочется, чтобы он грузил только первое фото, а второе и последующие только после нажатия на стрелочку "далее" или "назад".
а то он сразу грузит все фото, а потом уже листай себе спокойно..
а фоток около 1000 должно быть..
это веса аж 70 метров... если он все сразу грузить начнет, то ничего толкового не выйдет...

Изменено promoderator (2013-02-15 15:03:28)

promoderator · 2013-02-16 13:45:12

может кто-то мог бы подсказать?..
пациент: http://aladro.ru/static/kitchen.html

irbees2008 · 2013-02-16 17:11:09

тебе обязательно все выводить?может случайные или популярные,последние?

promoderator · 2013-02-16 22:40:22

irbees2008, ага, в том и трудность, что надо сделать так, чтобы в слайдере крутилось много картинок..

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

irbees2008 · 2013-02-18 17:47:59

а если подключить галерею?

aira · 2013-06-21 20:07:31

всем добрый вечер, я здесь новичок, но я надеюсь вы не откажете мне в помощи
у меня вопрос по слайдеру Circle navigation Effect

я пытаюсь его немного изменить, а именно, чтоб были не просто картинки, а ссылки на картинки

<div id="cn-slideshow" class="cn-slideshow">
                    <div class="cn-images">
                        <a href="#"><img src="images/large/1.jpg" alt="image01" title="Beautiful Scenery 1" data-thumb="images/thumbs/1.jpg" style="display:block;"/></a>
                        <a href="#"><img src="images/large/2.jpg" alt="image02" title="Beautiful Scenery 2" data-thumb="images/thumbs/2.jpg"/></a>
                        <a href="#"><img src="images/large/3.jpg" alt="image03" title="Beautiful Scenery 3" data-thumb="images/thumbs/3.jpg"/></a>
                        <a href="#"><img src="images/large/4.jpg" alt="image04" title="Beautiful Scenery 4" data-thumb="images/thumbs/4.jpg"/></a>
                    </div><!-- cn-images -->
                </div>

я понимаю, что при таком нужно внести изменения и в скрипт (jquery.slideshow), поэтому я изменила строчку:

// images
		this.$images		= this.$el.find('div.cn-images > img').hide();

НА

// images
		this.$images		= this.$el.find('div.cn-images > a img').hide();

в итоге картинки меняются как полагается, правильно подставляется текущий title, а вот со след и пред появились проблемы, они совершенно не меняются

подскажите, пожалуйста, что ещё необходимо исправить в скрипте?

Изменено aira (2013-06-21 20:15:20)

Next Generation CMS :: Форум поддержки

Объявление

#1 2013-02-12 12:52:01

Слайдер

#2 2013-02-12 21:45:31

Re: Слайдер

#3 2013-02-12 21:45:52

Re: Слайдер

#4 2013-02-12 21:47:00

Re: Слайдер

#5 2013-02-13 00:47:41

Re: Слайдер

#6 2013-02-13 07:10:48

Re: Слайдер

#7 2013-02-13 13:26:19

Re: Слайдер

#8 2013-02-13 18:27:21

Re: Слайдер

#9 2013-02-13 22:28:36

Re: Слайдер

#10 2013-02-14 08:23:21

Re: Слайдер

#11 2013-02-14 14:22:49

Re: Слайдер

#12 2013-02-14 18:47:52

Re: Слайдер

#13 2013-02-14 20:07:18

Re: Слайдер

#14 2013-02-14 20:34:00

Re: Слайдер

#15 2013-02-14 20:39:42

Re: Слайдер

#16 2013-02-14 21:07:17

Re: Слайдер

#17 2013-02-15 14:45:25

Re: Слайдер

#18 2013-02-16 13:45:12

Re: Слайдер

#19 2013-02-16 17:11:09

Re: Слайдер

#20 2013-02-16 22:40:22

Re: Слайдер

#21 2013-02-18 17:47:59

Re: Слайдер

#22 2013-06-21 20:07:31

Re: Слайдер

Подвал раздела