Автор Тема: Позициониране на close.png  (Прочетена 2769 пъти)

0 Потребители и 1 Гост преглежда(т) тази тема.

jazzman

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 25
  • -Получени: 190
  • Публикации: 3624
Позициониране на close.png
« -: 05 Октомври 2015, 01:24:59 »
Къде се позиционира затварящият бутон при вас - http://lokeshdhakar.com/projects/lightbox2/ (кликни на снимките по-долу, вирус нема )
При мен се позиционира вдесно, долу, а според css пропъртито би трябвало да е  url("../images/close.png") no-repeat scroll right top;
Опитвам се да го кача горе,  вдесно, ама нещо не ма слуша :)  С лисица 38.3.0 съм, под пингвина.
« Последна редакция: 05 Октомври 2015, 01:31:44 от jazzman »
Java is to Javascript as fun is to funeral.

http://nau4i.me/forum/index.php/topic,15129.0.html

georgirgeorgiev

  • Full Member
  • ***
  • Благодарности
  • -Казани: 77
  • -Получени: 13
  • Публикации: 164
Re: Позициониране на close.png
« Отговор #1 -: 05 Октомври 2015, 04:15:30 »
Долу вдясно е и при мен (с последна версия на Google Chrome съм).
Причината да се намира там, не е ли, че елемента с клас име "lb-dataContainer" (който е пра-пра родител на "X") се намира под елемента с клас име "lb-outerContainer" (в който се намира снимката) и този "X" не може да отиде по-нагоре, понеже е затворен в този пра-пра родителски елемент ("lb-dataContainer") с височина 30px?
« Последна редакция: 05 Октомври 2015, 13:05:30 от georgirgeorgiev »

jazzman

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 25
  • -Получени: 190
  • Публикации: 3624
Re: Позициониране на close.png
« Отговор #2 -: 05 Октомври 2015, 13:59:52 »
Бъркал съм се с тази.  Нея съм ползвал преди. Взех да правя сайт на котиджа си, че за тва питам де. Не съм се ровил в пропъртитата да видя кой е  родителя и децата му :)
Java is to Javascript as fun is to funeral.

http://nau4i.me/forum/index.php/topic,15129.0.html

georgirgeorgiev

  • Full Member
  • ***
  • Благодарности
  • -Казани: 77
  • -Получени: 13
  • Публикации: 164
Re: Позициониране на close.png
« Отговор #3 -: 05 Октомври 2015, 19:43:27 »
Разбирам.
И сега какъв точно е проблема, който искаш да решиш?

Avalanche

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 65
  • -Получени: 275
  • Публикации: 2602
  • meow
Re: Позициониране на close.png
« Отговор #4 -: 05 Октомври 2015, 19:56:01 »
Нема да стане така братчед, "затвори" бутонът не изпълва цялото пространство около снимката че да го наместваш с background-position. То си е с размери 30x30 и колкото да си играеш с това свойство, извън тая рамка няма да излезе. По-скоро опитай нещо като това http://stackoverflow.com/q/13218860/1125161
"Компютрите не правят каквото искаме, а каквото им кажем." Ако разбереш какво значи това няма да имаш големи проблеми, нито с никоя ОС, нито език, или софтуер.
Аз не съм програмист между другото!

jazzman

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 25
  • -Получени: 190
  • Публикации: 3624
Re: Позициониране на close.png
« Отговор #5 -: 06 Октомври 2015, 13:54:51 »
Ави па долу вдесно стои. Пробвах скрипта от стака ама не става. Гоше, искам икса да стои горе вдесно. Шъ ми помогнеш ли :)   
Java is to Javascript as fun is to funeral.

http://nau4i.me/forum/index.php/topic,15129.0.html

Avalanche

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 65
  • -Получени: 275
  • Публикации: 2602
  • meow
Re: Позициониране на close.png
« Отговор #6 -: 06 Октомври 2015, 20:28:42 »
Са го погледнах и си поиграх малко, не виждам начин да стане освен да се хардкодне нещо подобно на това в стака. Което за мене е адски грозно и по-скоро бих потърсил друга библиотека.
"Компютрите не правят каквото искаме, а каквото им кажем." Ако разбереш какво значи това няма да имаш големи проблеми, нито с никоя ОС, нито език, или софтуер.
Аз не съм програмист между другото!

georgirgeorgiev

  • Full Member
  • ***
  • Благодарности
  • -Казани: 77
  • -Получени: 13
  • Публикации: 164
Re: Позициониране на close.png
« Отговор #7 -: 07 Октомври 2015, 18:38:45 »
По-късно ще пиша. Майче намерих един начин, но не знам дали те устройва.

georgirgeorgiev

  • Full Member
  • ***
  • Благодарности
  • -Казани: 77
  • -Получени: 13
  • Публикации: 164
Re: Позициониране на close.png
« Отговор #8 -: 07 Октомври 2015, 20:49:19 »
Гоше, искам икса да стои горе вдесно. Шъ ми помогнеш ли :)

Мен ли имаш предвид?

Oтносно преместването на X-са:

X-са, тоест <a class="lb-close"></a> елемента го премести, вместо там, където е, да бъде вътре в <div class="lb-container"></div> елемента.

След това, отвори CSS файла с име lightbox.css и най-накрая във файла последните редове код в него са:

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}




Изтрий ги и ги замени с тези:

.lb-container .lb-close {
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: -35px;
  right: 0;
  background: url(../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-container .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}



Това е крайният резултат. Кажи дали те устройва самия начин на преместване. Инак точното местоположение на X-са до последния пиксел, както и като цяло стиловете, ако не ти харесват, можеш да ги промениш.


free image uploading
« Последна редакция: 07 Октомври 2015, 20:52:13 от georgirgeorgiev »

jazzman

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 25
  • -Получени: 190
  • Публикации: 3624
Re: Позициониране на close.png
« Отговор #9 -: 08 Октомври 2015, 12:45:37 »
Георгиев, едно голямо благодаря имаш от мен за старанието да помогнеш, но крайният ефект е нулев при мен ;)

ПП. Изтрих всичко от lightbox.css и всичко си работи по старому. Очевидно css документа се зарежда от друго място. Днес няма да имам време да тествам, но обещавам да пиша утре или вдругиден. Лек ден от мен. Господ да пази, всички ви!
« Последна редакция: 08 Октомври 2015, 12:51:25 от jazzman »
Java is to Javascript as fun is to funeral.

http://nau4i.me/forum/index.php/topic,15129.0.html

georgirgeorgiev

  • Full Member
  • ***
  • Благодарности
  • -Казани: 77
  • -Получени: 13
  • Публикации: 164
Re: Позициониране на close.png
« Отговор #10 -: 08 Октомври 2015, 15:32:11 »
БОГ да ни пази всички. Амин.

Направих един клип да ти покажа точно как премествам X-са, за да ако искаш да сравниш дали точно така си пробвал и ти. Ако решиш да го пуснеш, му промени quality настройката в плейъра на "youtube" да бъде на 1080p HD.

Видеото - https://www.youtube.com/watch?v=GyHI-1A7iYA&feature=youtu.be

Avalanche

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 65
  • -Получени: 275
  • Публикации: 2602
  • meow
Re: Позициониране на close.png
« Отговор #11 -: 08 Октомври 2015, 19:33:43 »
Видеото - https://www.youtube.com/watch?v=GyHI-1A7iYA&feature=youtu.be

Няма да стане така, CSS-а го разменяш след като е заредил, а той се генерира през JS четейки от един линк само
Код: HTML
  1. <a href="..." data-lightbox="image-1" data-title="My caption">...</a>

Трябва да се променя JavaScript-а, или да се направи със CSS някакъво абсолютно позициониране - ама и в двата случая е доста играчка
"Компютрите не правят каквото искаме, а каквото им кажем." Ако разбереш какво значи това няма да имаш големи проблеми, нито с никоя ОС, нито език, или софтуер.
Аз не съм програмист между другото!

georgirgeorgiev

  • Full Member
  • ***
  • Благодарности
  • -Казани: 77
  • -Получени: 13
  • Публикации: 164
Re: Позициониране на close.png
« Отговор #12 -: 08 Октомври 2015, 20:09:33 »
Нямах си и на идея, че така стоят нещата ... Извинявайте!
А този втория начин с добавянето на CSS-а за който си написал, общо взето каква е крайната цел за да се постигне резултата по този начин ?
Да се промени чрез CSS местоположението на X-са така, че да застане горе вдясно, както иска jazzman, без това да включва местене на X елемента от единия <div> в другия <div> (както съм показал на видеото) - това ли е крайната цел?
« Последна редакция: 08 Октомври 2015, 20:11:20 от georgirgeorgiev »

Avalanche

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 65
  • -Получени: 275
  • Публикации: 2602
  • meow
Re: Позициониране на close.png
« Отговор #13 -: 08 Октомври 2015, 20:26:15 »
Това с absolute позициониране и отрицателен top може да свърши работа, Джаза да тества и да каже, ако ли не да пренапише CSS-а на lightbox от нулата.

Между другото тая библиотека е много стара и не е мръднала хич като развитие, аз бих пробвал нещо по-свежо
"Компютрите не правят каквото искаме, а каквото им кажем." Ако разбереш какво значи това няма да имаш големи проблеми, нито с никоя ОС, нито език, или софтуер.
Аз не съм програмист между другото!

HanKrum

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 123
  • -Получени: 73
  • Публикации: 1002
  • Кибик
Re: Позициониране на close.png
« Отговор #14 -: 08 Октомври 2015, 20:56:34 »
Затова сам си пиша нещата, за да имам контол над приложението СИ!
:)
"Силата на правителството се крепи на невежеството на народа, и те знаят това и винаги ще се борят против просвещението." Лев Толстой