Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Карусель для фотогалереи (https://javascript.ru/forum/dom-window/13955-karusel-dlya-fotogalerei.html)

x-yuri 24.12.2010 09:53

Цитата:

Сообщение от Nanto
А со мной опытом поделиться - религия не велит?

повторяю второй раз: ты сделаешь один сайт и забудешь. Смысл?

Nanto 26.12.2010 07:04

Во мля, орден тамплиеров!.. :)
Тайное знание только на смертном одре преемникам передаём? :)

dmitriymar 26.12.2010 11:10

Nanto,
чего предлагаешь? кого валить собрался Горец -:haha: чтобы получить его знания и силу?

Nanto 26.12.2010 23:11

Ладно давайте конкретнее!..
Меня вот интересует вопрос авторского права! Кто в курсе?
Понятно что если я напишу на js скриптик - всё ок, ибо Open Source!
Беру чужой код и не ссылаюсь на автора - это ведь уже нарушение АП?
А если кто-то написал скрипт и выложил в сыободный доступ... Надо ли его упоминать в коде?..
А если использую библиотеки (типа jQuery)?..

Nanto 27.12.2010 15:15

Оп-па! А вот этого я не предусмотрел!..
Тестил карусель только на картинках с вертикальной ориентацией, а если в списке есть альбомная - всё идёт через ж..!
Поля (margin) тогда получаются разные и размер контейнера вычисляется как квадрат со стороной равной высоте картинки...
Ладно, размер контейнера я задал принудительно через CSS.
Но вот поля выровнять через CSS видимо нереально... Поскольку применить какие-то свойства стиля можно только к уже сгенерированному скриптом контейнеру, но не к картинке внутри него, так?
причём это болезнь всех каруселей что я видел (поля разного размера между картинками с вертикальной и горизонтальной ориентацией)... Это можно обойти? Как я понимаю, корректно реализовать анимацию в скрипте можно только при условии равенства длинны каждого контейнера?..
Видимо, если и можно, то все равно будеи коряво - некоторые элементы не будут вмещаться целиком на полосу прокрутки и т.д.

Тогда придётся делать квадратные боксы приятного вида и размещать картинки в них, в связи с этим несколько вопросов.
Вприведенном ниже куске .js, лишнее я выкинул (то что касается инициализации и анимации, оставил только то что кмк касается стиля оформления). С самим CSS я разберусь, а вот с "оформлением" в js туплю:
1) где (в какой функции или какой переменной) задаются размеры контейнера (или вычисляются) - хочу задать иx фиксированным значением (например 200x200 px.);
2) как разместить картинку посередине контейнера (по умолчанию они сдвинуты top, и видимо left);
3) можно ли в этот код ввести условие, чтобы вначале загружался фон контейнера (одинаковый для всех), а затем через z-index поверх уже лепилась картинка?

//бла-бла...
        var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";
        var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.visible;

        if(o.circular) {
            ul.prepend(tLi.slice(tl-v-1+1).clone())
              .append(tLi.slice(0,v).clone());
            o.start += v;
        }

        var li = $("li", ul), itemLength = li.size(), curr = o.start;
        div.css("visibility", "visible");

        li.css({overflow: "hidden", float: o.vertical ? "none" : "left"});
        ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});
        div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});

        var liSize = o.vertical ? height(li) : width(li);   // Full li size(incl margin)-Used for animation
        var ulSize = liSize * itemLength;                   // size of full ul(total length, not just for the visible items)
        var divSize = liSize * v;                           // size of entire div(total length for just the visible items)

        li.css({width: li.width(), height: li.height()});
        ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));

        div.css(sizeCss, divSize+"px");                     // Width of the DIV. length of visible images

//бла-бла...

function css(el, prop) {
    return parseInt($.css(el[0], prop)) || 0;
};
function width(el) {
    return  el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');
};
function height(el) {
    return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');
};

})(jQuery);


P.S. Не знаю кстати, в этом куске представлены типичные для JS значения или что-то сделано посредством библиотеки (всё-таки jQuery подключен).

Nanto 27.12.2010 15:36

забыл добавить, в HTML карусель реализована как:

<script language="" type="text/javascript">
	jQuery(function(){
	   jQuery(".gallery").jCarouselLite({
              });
	});
</script>

<!-- и каждый контейнер выводится как элемент <li> списка <ul> -->

<div align="center" class="gallery"> 
  <ul>
	<li><a href="link"><img src="link"/></a></li>
	<!--........-->
           <li><a href="link"><img src="link"/></a></li>
  </ul>
</div>

dmitriymar 27.12.2010 17:00

смотри пред. посты :yes:

Nanto 27.12.2010 21:02

dmitriymar,
Не знаем? Или в очередной раз свою г..внистость показать хотим?
http://javascript.ru/tutorial/regexp...s#comment-3231

dmitriymar 27.12.2010 21:13

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

dmitriymar 27.12.2010 21:22

Цитата:

Сообщение от Nanto
Не знаем? Или в очередной раз свою г..внистость показать хотим?
http://javascript.ru/tutorial/regexp...s#comment-3231

ну и причём рег. выражения к картинкам?)


Часовой пояс GMT +3, время: 00:46.