Zadejte hledaný výraz...
Jakub Glos
Webtrh.cz
Vývoj webových stránek na WordPressu a proklientský přístup pro freelancery
Třídenní infromacemi nabitý prezenční + online kurz v Praze od Webtrhu pouze za 2 871 Kč
Více informací

Jak udělat, aby lightbox vyskakoval pouze do určeného divu, ne do body?

Ahoj,
včera jsem se několikrát těžce neúspěšně snažila si poradit s tím, aby lightbox vyskakoval pouze do určeného divu, ne do body. Potřebuji to pouze dát celé do divu - říkejme mu #wrapper. Css už si tam upravím.
Ve vedlejší diskuzi - https://webtrh.cz/337284-odporucite-moderny-responzivny-lightbox-podporoval se zmiňujete, že lze owl.carousel rozchodit jako lightbox - po stránce css bych věděla, ale jak na to, pokud chci udržovat pořadí - fotek je víc, tzn. že když kliknu na jednu, tak jak pak na další?
Nebo máte zkušenost někdo s nějakou úpravu lightboxu? Prošla jsem google s různými dotazy, ale buď to blbě definuju, nebo to zatím nikdo nepotřeboval (což je divné).
ukázka:
https://ctrlv.cz/1V6Y . Menu, má zůstat viditelné, fotky se mají překrýt rozkliknutou full fotkou se šipkami a křížkem.
Moc děkuji za radu -
Martina
19. 4. 2016 11:16:32
https://webtrh.cz/diskuse/jak-udelat-aby-lightbox-vyskakoval-pouze-do-urceneho-divu-ne-do-body/#reply1190417
Jakub Jeřábek
verified
rating uzivatele
19. 4. 2016 13:13:04
Lightboxy fungují tak, že se celý web přeplácne divem s poloprůhlednou černou barvou s absolutním nebo fixním pozicováním. Nad tímto divem je pak div s otevřeným obrázkem.
Vyřešit to lze tak, že se upraví pozice těmto dvěma elementům tak, aby černý div začínal například 300px zleva (aby bylo vidět menu) a obrázek byl uprostřed toho černého divu.
Určitě ti pomůže si zobrazit ten lightbox v prohlížeči -> kliknout na něj pravým tlačítkem -> kliknout na Prozkoumat prvek (případně nějak podobně v závislosti na prohlížeči). Tam si s tím můžeš pohrát.
Ale je možné, že to některý lightbox umí automaticky roztáhnout jen do nějakého elementu.
19. 4. 2016 13:13:04
https://webtrh.cz/diskuse/jak-udelat-aby-lightbox-vyskakoval-pouze-do-urceneho-divu-ne-do-body/#reply1190416
Ahoj,
jasně, no, ale to není ono. Navíc se mi povedlo vyřešit to fikaně za použití owl.carouselu. Nakopla mě vedlejší diskuse a nakonec to tak těžké nebylo.
Pro další zájemce:
Owl.carousel 2.0 :
Owl carousel je zavolán na div #carousel_photo. Markup uvnitř je standartní pro owlCarousel. Po kliknutí na figure ve kterém je miniatura se zobrazí velké okno se startPozicí podle indexu té miniatury.
Mám tedy klasický div s fotogalerií a vedle klasický div s owl.carouslem. Div s owl.carouselem je napozicovaný přes fotogalerii. Ty fotky tam sice musí být v html dvakrát, to jo, ale ta první bude buď malá, nebo stejná, takže by se tím teoreticky neměl ten load moc zasekat. Navíc já mám cca 6 fotek na jednu galerii.
Teoretický příklad zatím není dostupný, postnu ho sem, až to poběží oficiálně :).
$('#carousel_photo').hide();
$('.gallery_archive figure').click(function(){
$('#carousel_photo').show();
var figure_num=$(this).index();
$('#carousel_photo').owlCarousel({
items:1,
nav:true,
dots:false,
navText:'',
startPosition: figure_num,
});
});
Nevím, jestli to dává hlavu a patu, ale třeba to někomu pomůže.
19. 4. 2016 15:20:15
https://webtrh.cz/diskuse/jak-udelat-aby-lightbox-vyskakoval-pouze-do-urceneho-divu-ne-do-body/#reply1190415
Pro odpověď se přihlašte.
Přihlásit