Стрелочки следующее и предыдущее фото. Как реализовать на юкоз?

Общие вопросы по системе юкоз, вопросы по ucoz, вопросы без определенной темы

Стрелочки следующее и предыдущее фото. Как реализовать на юк

» » Сообщение:

Всем доброго дня! Вот у меня появился такой маленький вопросик, хотя для меня он никакой не маленький) Можете помочь, если вам не трудно? Вот на одном сайте http://fotki.ucoz.ua увидел что на странице с полной фотографией и комментариями между фотографией есть стрелочки след. фото и пред. фото. А как их реализовать можно? За ранее всем благодарен за любой ответ! :)

фотографией, маленький, фото, след, пред, ранее, ответ, любой, благодарен, реализовать, полной, можете, никакой, вопросик, помочь, одном, fotki, сайте, увидел

Re: Как сделать.. Не сортированные вопросы/ответы по юкоз

Admin » » Сообщение:

Денис

Денис писал(а) › 11 мар 2016, 14:14:Вот на одном сайте http://fotki.ucoz.ua увидел что на странице с полной фотографией и комментариями между фотографией есть стрелочки след. фото и пред. фото. А как их реализовать можно?

Эти стрелочки, кроме всего прочего, выводит оператор: $OTHER_PHOTOS$

стрелочки переключения между фотографиями

просто показаны только стрелочки, а цифры скрыты..

стрелочки след. фото и пред. фото.
Денис писал(а) › 11 мар 2016, 14:14:А как их реализовать можно?

Вывести оператором $OTHER_PHOTOS$ и отредактировать стили таким образом, что бы скрыть цифры, но оставить переключатели, овормить их как стрелочки и позиционировать соответственно.
Подсмотреть как именно, можно по вашей же ссылке.



Re: Стрелочки следующее и предыдущее фото. Как реализовать н

Rln » » Сообщение:

Это то есть как то скрыть сами цифры путем "{display:none}"? Я попробовал сделать так же, но вышло примерно только так.

<span id="prevPh"><a class="photoOtherLink">« Предыдущая</a></span>
<span id="nextPh"><a class="photoOtherLink">« Следующая</a></span>

Вижу, что самой ссылки (href="") не хватает, а не подскажите, в какую сторону двигаться? :)


Re: Стрелочки следующее и предыдущее фото. Как реализовать н

Admin » » Сообщение:

Rln писал(а) › 13 май 2016, 18:25:Вижу, что самой ссылки (href="") не хватает, а не подскажите, в какую сторону двигаться?

Скриншот выше видите?

Rln писал(а) › 13 май 2016, 18:25:Это то есть как то скрыть сами цифры путем "{display:none}"?

Да, скрыть те цифры, что между «вперед» и «назад».
А сами стрелочки позиционировать абсолютно или относительно так, что бы было удобно, и придать внешний вид стрелочек, например, прописав фиксированные размеры prevPh и фоновую картинку стрелки.

Rln писал(а) › 13 май 2016, 18:25:Я попробовал сделать так же, но вышло примерно только так.

Ничего дополнительно в шаблон прописывать не нужно, работа только стилями с системными элементами, что выводятся оператором $OTHER_PHOTOS$


Re: Стрелочки следующее и предыдущее фото. Как реализовать н

Rln » » Сообщение:

А, всё вроде немного разобрался. Вышло так:

a.photoOtherLink #prevPh, #nextPh {font-size: 0px; position: absolute; top: 100px; width: 32px; padding-top: 58px; display: block; z-index: 101; background: url("/right.png");}
a.photoOtherLink #prevPh {background-position: 0 0; left: -10px;}
a.photoOtherLink #prevPh:hover, a.photoOtherLink #nextPh:hover {filter:alpha(opacity=90); ..-opacity:0.9; opacity:0.9; -khtml-opacity:0.9;}
a.photoOtherLink #nextPh {background-position: -32px 0; right: -10px;}

a.photoOtherLink #prevPh, #nextPh {
font-size: 0px;
position: absolute;
top: 100px;
width: 32px;
padding-top: 58px;
display: block;
z-index: 101;
background: url("/right.png");

Только в каком направлении дальше думать, я даже не знаю. Стрелочки вроде б как появились по бокам как нужно, но вкривь. :)
А да, а еще не подскажите, как сами циферки скрыть?)


Re: Стрелочки следующее и предыдущее фото. Как реализовать н

Admin » » Сообщение:

Rln писал(а) › 14 май 2016, 23:03:Только в каком направлении дальше думать, я даже не знаю. Стрелочки вроде б как появились по бокам как нужно, но вкривь.

Для начала, неплохо бы сделать так:

Код: Выделить всё Развернуть
<?if($OTHER_PHOTOS$)?><div id="other_photos">$OTHER_PHOTOS$</div><?endif?>

- что бы было от чего плясать при позиционировании. Ибо позиционирование всегда происходит относительно родительского элемента с позицией релатив или абсолют.
Далее:

Код: Выделить всё Развернуть
#other_photos{
   position:relative;
   margin:0 auto;
   width:100%;
}

- задаем точку отсчета координат.
Ширина ≈ ширине фотки на данной странице или 100% если горизонтальная позиция стрелки относительно фото не особо важна.

Скрываем все что внутри:

Код: Выделить всё Развернуть
#other_photos,
#other_photos a,
#other_photos b{
   color:transparent;
   font:0/0% a;
}

Показываем стрелочки:

Код: Выделить всё Развернуть
#prevPh,
#nextPh{
   display:block;
   width:32px;
   height:32px;
   background-color:#F00;
   position:absolute;
   z-index:2;
   left:0;
   top:0;
}
#nextPh{
   left:auto;
   right:0;
   float:right;
}
Стрелочки следующее и предыдущее фото. Как реализовать на юк

...Ну а дальше - полет фантазии.



Re: Стрелочки следующее и предыдущее фото. Как реализовать н

alexandr » » Сообщение:

Добрый день! У меня этот же код раньше стоял на сайте, сейчас решил снова поставить. с ним все в порядке, только не подскажите, а можно ли как нибудь выравнять эти стрелочки по вертикали? Просто пробовал vertical-align: middle; не подходит :) А делать какой-то определённый размер по высоте не хотелось бы. Хотелось бы чтоб он сам подстраивался по вертикали. (


Re: Стрелочки следующее и предыдущее фото. Как реализовать н

Admin » » Сообщение:

alexandr писал(а) › 29 май 2016, 12:00:можно ли как нибудь выравнять эти стрелочки по вертикали?

Можно, если запаковать их в блок в самой фоткой и прописать верхний отступ -50% - половина высоты кнопки
Короче, на словах, наверное непонятно будет..


Re: Стрелочки следующее и предыдущее фото. Как реализовать н

alexandr » » Сообщение:

если запаковать их в блок в самой фоткой и прописать верхний отступ -50% - половина высоты кнопки

Ну в целом немного понял, но не до конца).
Я и в CSS пробовал дописать, и в сам код с фоткой пробовал такое (style="margin-top: -50%;"), но не получилось. Но идею я уловил)


Re: Стрелочки следующее и предыдущее фото. Как реализовать н

Admin » » Сообщение:

alexandr писал(а) › 29 май 2016, 19:41:Ну в целом немного понял, но не до конца).

Ну в общем вам нужна такая структура:

Код: Выделить всё Развернуть
<div class="box" style="position:relative;top:0;float:left;">
<img src="/uploads/files/2012-01/1325420354_unesennye-vetrom.jpg" width="495" height="640" />
<a style="display:block;position:absolute;top:50%;margin-top:-16px;z-index:2;float:left;left:0;height:32px;width:32px;background-color:#F00;" href="#">«</a>
<a style="display:block;position:absolute;top:50%;margin-top:-16px;z-index:2;float:right;right:0;height:32px;width:32px;background-color:#F00;" href="#">»</a>
</div>

Где float:left; для box нужен что бы стрелки были по краям картинки, иначе блок растягивается на всю ширину.
А background-color:#F00; для того что бы стрелки наблюдать.
margin-top:-16px; - половина высоты стрелки.
И тогда они всегда будут по центру картинки, по вертикали.

Стрелочки следующее и предыдущее фото. Как реализовать н





Похожие темыКомментарии ПросмотрыПоследнее сообщение
10947Re: Как узнать сколько дней прошло ...
Сообщение от: Fearfire
0539Фотошоп. Наклонные линии на фото
Сообщение от: Admin
750Re: Возможность реализовать скрипт ...
Сообщение от: Admin
11197Re: Как можно реализовать логин на ...
Сообщение от: Admin