Научи ме

WEB => HTML и CSS => Темата е започната от: jazzman в 05 Октомври 2015, 01:24:59

Титла: Позициониране на close.png
Публикувано от: jazzman в 05 Октомври 2015, 01:24:59
Къде се позиционира затварящият бутон при вас - http://lokeshdhakar.com/projects/lightbox2/ (кликни на снимките по-долу, вирус нема )
При мен се позиционира вдесно, долу, а според css пропъртито би трябвало да е  url("../images/close.png") no-repeat scroll right top;
Опитвам се да го кача горе,  вдесно, ама нещо не ма слуша :)  С лисица 38.3.0 съм, под пингвина.
Титла: Re: Позициониране на close.png
Публикувано от: georgirgeorgiev в 05 Октомври 2015, 04:15:30
Долу вдясно е и при мен (с последна версия на Google Chrome съм).
Причината да се намира там, не е ли, че елемента с клас име "lb-dataContainer" (който е пра-пра родител на "X") се намира под елемента с клас име "lb-outerContainer" (в който се намира снимката) и този "X" не може да отиде по-нагоре, понеже е затворен в този пра-пра родителски елемент ("lb-dataContainer") с височина 30px?
Титла: Re: Позициониране на close.png
Публикувано от: jazzman в 05 Октомври 2015, 13:59:52
Бъркал съм се с тази (http://fancybox.net/).  Нея съм ползвал преди. Взех да правя сайт на котиджа си, че за тва питам де. Не съм се ровил в пропъртитата да видя кой е  родителя и децата му :)
Титла: Re: Позициониране на close.png
Публикувано от: georgirgeorgiev в 05 Октомври 2015, 19:43:27
Разбирам.
И сега какъв точно е проблема, който искаш да решиш?
Титла: Re: Позициониране на close.png
Публикувано от: Avalanche в 05 Октомври 2015, 19:56:01
Нема да стане така братчед, "затвори" бутонът не изпълва цялото пространство около снимката че да го наместваш с background-position. То си е с размери 30x30 и колкото да си играеш с това свойство, извън тая рамка няма да излезе. По-скоро опитай нещо като това http://stackoverflow.com/q/13218860/1125161
Титла: Re: Позициониране на close.png
Публикувано от: jazzman в 06 Октомври 2015, 13:54:51
Ави па долу вдесно стои. Пробвах скрипта от стака ама не става. Гоше, искам икса да стои горе вдесно. Шъ ми помогнеш ли :)   
Титла: Re: Позициониране на close.png
Публикувано от: Avalanche в 06 Октомври 2015, 20:28:42
Са го погледнах и си поиграх малко, не виждам начин да стане освен да се хардкодне нещо подобно на това в стака. Което за мене е адски грозно и по-скоро бих потърсил друга библиотека.
Титла: Re: Позициониране на close.png
Публикувано от: georgirgeorgiev в 07 Октомври 2015, 18:38:45
По-късно ще пиша. Майче намерих един начин, но не знам дали те устройва.
Титла: Re: Позициониране на close.png
Публикувано от: georgirgeorgiev в 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-са до последния пиксел, както и като цяло стиловете, ако не ти харесват, можеш да ги промениш.

(http://s1.postimg.org/6k9kses2n/Screen_Shot_10_07_15_at_06_33_PM.png) (http://postimg.org/image/f2j0wqyl7/full/)
free image uploading (http://postimage.org/)
Титла: Re: Позициониране на close.png
Публикувано от: jazzman в 08 Октомври 2015, 12:45:37
Георгиев, едно голямо благодаря имаш от мен за старанието да помогнеш, но крайният ефект е нулев при мен ;)

ПП. Изтрих всичко от lightbox.css и всичко си работи по старому. Очевидно css документа се зарежда от друго място. Днес няма да имам време да тествам, но обещавам да пиша утре или вдругиден. Лек ден от мен. Господ да пази, всички ви!
Титла: Re: Позициониране на close.png
Публикувано от: georgirgeorgiev в 08 Октомври 2015, 15:32:11
БОГ да ни пази всички. Амин.

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

Видеото - https://www.youtube.com/watch?v=GyHI-1A7iYA&feature=youtu.be
Титла: Re: Позициониране на close.png
Публикувано от: Avalanche в 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 някакъво абсолютно позициониране - ама и в двата случая е доста играчка
Титла: Re: Позициониране на close.png
Публикувано от: georgirgeorgiev в 08 Октомври 2015, 20:09:33
Нямах си и на идея, че така стоят нещата ... Извинявайте!
А този втория начин с добавянето на CSS-а за който си написал, общо взето каква е крайната цел за да се постигне резултата по този начин ?
Да се промени чрез CSS местоположението на X-са така, че да застане горе вдясно, както иска jazzman, без това да включва местене на X елемента от единия <div> в другия <div> (както съм показал на видеото) - това ли е крайната цел?
Титла: Re: Позициониране на close.png
Публикувано от: Avalanche в 08 Октомври 2015, 20:26:15
Това с absolute позициониране и отрицателен top може да свърши работа, Джаза да тества и да каже, ако ли не да пренапише CSS-а на lightbox от нулата.

Между другото тая библиотека е много стара и не е мръднала хич като развитие, аз бих пробвал нещо по-свежо
Титла: Re: Позициониране на close.png
Публикувано от: HanKrum в 08 Октомври 2015, 20:56:34
Затова сам си пиша нещата, за да имам контол над приложението СИ!
:)
Титла: Re: Позициониране на close.png
Публикувано от: jazzman в 09 Октомври 2015, 13:52:30
Георгиев, X-са изчезна безледно. Скри се! Ави, ами замислям се да ползвам отново fancybox или някоя библиотека написна от набора ;)
Титла: Re: Позициониране на close.png
Публикувано от: georgirgeorgiev в 09 Октомври 2015, 14:35:52
Георгиев, X-са изчезна безледно. Скри се! Ави, ами замислям се да ползвам отново fancybox или някоя библиотека написна от набора ;)
Съжалявам нямам идея защо така се получава - при мен един резултат, при теб друг.
Avalanche, спомена за генериране на CSS през JS линк, може ли да попитам какво по-точно представлява това генериране, как става?  Да не би това да е  причината да се различава резултата при мен и при теб?
Титла: Re: Позициониране на close.png
Публикувано от: Avalanche в 09 Октомври 2015, 21:20:26
Първия резултат от гугъл https://feimosi.github.io/baguetteBox.js/

1. Директно ти е горе хикса
2. Не се занимаваш с jQuery