Forum: Mały problem z html i css.

Mały problem z html i css.

Mam taką strukturę:
<div class="album"> // to jest container z atrybutem display: table, wycentrowany przez margin: 0 auto.

//3 divy z ‹float: left›

<a href="link do poprzedniej foty"><div class="prev"></div></a>
<div class="imagebrowser"> //tutaj kod php ładuje mi fotkę </div>
<a href="link do następnej fory"><div class="next"></div></a>

</div>

Fotka ma rozdzielczość 800x533 lub 533x800 + ramka 10px, w containerze jest 900px miejsca na to. Divy "prev" i "next" zawsze mają wysokość 553px, szerokość 30px i tło z atrybutem no-repeat, które wyświetla strzałkę. Tło ma opacity mniejsze niż 1.0 i po najechaniu na link (czyli cały div) opacity się zwiękasza, przez co strzałka (tło to czarna strzałka na przezroczystym tle) robi się ciemniejsza.

Problem: Chciałbym, żeby linki prev i next były aktywne po najechaniu na zdjęcie kursorem. 50% powierzchni z lewej aktywuje linka do poprzedniej foty, 50% powierzchni z prawej aktywuje linka do następnej foty. Jednocześnie odpowiednia strzałka musi się przyciemnić, żeby użytkownik był świadomy tego, że kliknięcie załaduje poprzednią lub następną fotkę. Żeby to zobrazować wrzucam screena jak to teraz wygląda. Kursorem najechałem na ten mały obszar 533x30 po prawej stronie od zdjęcia. Dodatkowym utrudnieniem jest fakt, że fotki mają różną szerokość - albo 533px, albo 800px, więc nie można wypozycjonować strzałek na stałe, chciałbym żeby zawsze były blisko zdjęcia.

2 przeźroczyste obiekty mające atrybut onChange mające po 50% do tego funkcja js zmieniająca strzalki z jasnych na ciemne. Obrazki lepiej by dać w solidny kontenerek i skalowanie do niego żeby fotki nie rozwalały ułożenia. Choć w sumie trzeba użycie stałych ograniczać jak diabli.

Naskrobaliśmy z kumplem coś takiego. Skrypt rysuje dwa prostokątne divy na zdjęciu niezależnie od jego wymiarów. Ale dalej jest problem z wsadzeniem linka i podświetleniem strzałki po najechaniu na te prostokąty.

<script type="text/javascript">
function imagebrowserOnload( ) ‹;

container = jQuery('.ngg-imagebrowser');

containerWidth = container.width();
containerHeight = container.height();

console.log(containerWidth);

lewePole = jQuery('.lewe-pole');
prawePole = jQuery('.prawe-pole');

lewePole.width(containerWidth/2).height(containerHeight);
prawePole.width(containerWidth/2).height(containerHeight).css('left', containerWidth/2);

poprzednie = jQuery('.poprzednie');

// działa wyświetlanie 'lewo', 'prawo' w konsoli, ale nie chce działać to poprzednie.addClass('active'), nie wiem dlaczego

lewePole.mouseover(
function () ‹;
console.log("lewo");

›;);

prawePole.mouseover(
function () ‹;
console.log("prawo");

›;);
›;
</script>

edit: forum zamienia klamerki na < >

prawePole.click(
function () ‹;
window.location.replace("adres");
›;);

Klikanie prostokąta i przejście do następnej fotki jest proste, ale... co jeśli linki te generowane są przez php? Jak je wkleić do funkcji?

<?php echo $image->next_image_link ?>#main

edit: jeżeli nie da się odpalić w ten sposób funkcji to muszę wczytać adres z linka, który już jest na stronie i ma swoje id. Jak?

Gotowe! Niestety w js/jquery jestem kompletnym świeżakiem i wyszła mi trochę ściana kodu. Nie da się tego jakoś skrócić?

<script type="text/javascript">
function imagebrowserOnload( ) ‹;

container = jQuery('.ngg-imagebrowser');

containerWidth = container.width();
containerHeight = container.height();

lewePole = jQuery('.lewe-pole');
prawePole = jQuery('.prawe-pole');

lewePole.width(containerWidth/2).height(containerHeight);
prawePole.width(containerWidth/2).height(containerHeight).css('left', containerWidth/2);

poprzednie = jQuery('.poprzednie');
nastepne = jQuery('.nastepne');

poprzednie.height(containerHeight);
nastepne.height(containerHeight);

lewePole.mouseenter(
function () ‹;
poprzednie.attr("style","opacity: 0.6");
poprzednie.height(containerHeight);
›;);
lewePole.mouseleave(
function () ‹;
poprzednie.attr("style","opacity: 0.3");
poprzednie.height(containerHeight);
›;);

prawePole.mouseenter(
function () ‹;
nastepne.attr("style","opacity: 0.6");
nastepne.height(containerHeight);
›;);
prawePole.mouseleave(
function () ‹;
nastepne.attr("style","opacity: 0.3");
nastepne.height(containerHeight);
›;);

poprzednie.mouseenter(
function () ‹;
poprzednie.attr("style","opacity: 0.6");
poprzednie.height(containerHeight);
›;);
poprzednie.mouseleave(
function () ‹;
poprzednie.attr("style","opacity: 0.3");
poprzednie.height(containerHeight);
›;);

nastepne.mouseenter(
function () ‹;
nastepne.attr("style","opacity: 0.6");
nastepne.height(containerHeight);
›;);
nastepne.mouseleave(
function () ‹;
nastepne.attr("style","opacity: 0.3");
nastepne.height(containerHeight);
›;);

lewePole.click(
function () ‹;
link = jQuery('.poprzednie').parent();
window.location.replace( link.attr( "href" ) );
›;
);
prawePole.click(
function () ‹;
link = jQuery('.nastepne').parent();
window.location.replace( link.attr( "href" ) );
›;
);

›;
</script>

Tez dopiero zaczynam naukę jQuery (a muszę na poniedziałek do pracy zrobić niezły kosmos, zobaczymy jak to będzie), ale pierwsze co mi przychodzi to może być ustawiał akcje kliknięcia lub innej akcji na div-a, a wewnątrz sprawdzał warunek, który dokładnie div został kliknięty/najechany? Powinno to skrócić trochę kod.. Aczkolwiek nie wiem czy nie plotę bez sensu, bo jak już wspomniałem, sam się ostro dopiero zacząłem przyuczać.. :-)

Od siebie proponuję zapoznać się z HTML5 + CSS3, można robić nieziemskie cuda własnie na samych CSS!

Proszę: http://codepen.io/AMKohn/pen/EKJHf