Wątek przeniesiony 2015-01-05 18:22 z Webmastering przez dzek69.

Znak wodny po kliknięciu ppm

0

Cześć,

Mam problem, chcę zrobić aby znak wodny pojawiał się dopiero po kliknięciu ppm > pokaż obrazek lub nawet jako hover. Próbowałem kilku rzeczy, teraz tak pomyślałem żeby wykorzystać jQuery ale nie bardzo wiem jak mogę to napisać, na razie mi nie wychodzi. Wykorzystuję pewne api z którego pobiera też znak wodny, aby ustawić znak wodny należy argument ustawić na true.
Fragment kodu:

 
<img src="{$photo->GetImgSrc('120_80', false, false, true)}" alt="" data-large="{$photo->GetImgSrc('800_600', false, false, true)}"/>

I dokładnie chodzi o to aby po najechaniu/kliknieciu myszką na obrazek zamieniło mi
data-large="{$photo->GetImgSrc('800_600', false, false, true)}
na
data-large="{$photo->GetImgSrc('800_600', true, false, true)}

Może ktoś wpadnie na jakiś ciekawy pomysł ? Dzieki

Próbuję coś takiego

<script>
$(document).ready(function(){
  $('img[data-large="{$photo->GetImgSrc('800_600', false, false, true)}"]').click(function(){
    $(this).load('img[data-large="{$photo->GetImgSrc('800_600', true, false, true)}"]')
  });  
});
</script>
 

To ma jakiś sens?

0
  1. To nie jest ŻADEN problem, żeby ściągnąc obrazek bez znaku wodnego
  2. Nie możesz w javascripcie wstawić kod do wykonania przez php. Gdy strona została już przez php wypluta - php nic więcej tu nie będzie robić. Naucz się rozróżniać to, że kod działa osobno na serwerze, osobno na lokalnym komputerze.

Generalnie przetworzeniu tego kodu będziesz miał w javascript dostępne coś w rodzaju (nazwy plików strzelam, nie wiem co to za system):
<img src="/images/img_001_clean_120x80.jpg" data-large="/images/img_001_clean_800x600.jpg" /> --- w javascripcie już nie widać tego $photo->GetImgSrc.

Dlaczego nie korzystasz z narzędzi deweloperskich?!

0

Rzeczywiście mas rację, rozumiem że znak wodny to nie jest wielkie zabezpieczenie jednak jest potrzeba tego użyć. Po stronie przegladarki wyglada to tak

<img src="photos/ofs_72/offer_72073/653890_800_600_1_0_1.jpg "/> 

A więc jestes wstanie coś doradzić ?

0
$('[data-large]').hover(function(){
    this.src=$(this).attr('data-large');
});

Pamiętaj, że to spowoduje, że dopiero w momencie najechania na zdjęcie - wersja ze znakiem wodnym zacznie być ładowana = mogą być zauważalne skoki strony, ze względu na nieznane rozmiary nowego obrazka przed pierwszym etapem jego ładowania.

BTW: Z kodu jakby wynika, że wersja ze znakiem wodnym jest większa?.. Coś zbyt przekombinowałeś...

0

Nie nie, nie jest większa wersja ze znakiem wodnym, cały kod od pobierania obrazków to jest

<img src="{$photo->GetImgSrc('120_80', false, false, true)}" alt="" data-large="{$photo->GetImgSrc('800_600', false, false, true)}"/>

gdzie

img src="{$photo->GetImgSrc('120_80', false, false, true)}"

to są miniaturki a data-large wyświetla duży obrazek, także ten kod jquery co mi podałeś chyba nie zadziała. Chodzi o to że w dara-large drugi argument ma się zmienić na true, wtedy powinno pobrać obrazek ze znakiem wodnym (tylko tez nie wiem czy to możliwe bo przeciez ma to zadziałać po stronie serwera ) ehh no ciężka sprawa, będę kombinował ale dzięki za chęci

0

no to robisz data-large-watermark i potem podmieniasz te wartości... ale nie wiem kiedy w ogóle wyświetlasz obraz spod data-large

I po raz kolejny - NIE KOMBINUJ. Zrób zdjęcia na stałe z watermarkiem. Spędzasz kolejny dzień nad budową czegoś, co nie ma sensu. Bardziej ogarnięty 13 latek potrzebuje maks 5 minut by to rozwalić, a Pani Krysia może przypadkiem odkryć jak zapisać zdjęcie bez watermarka (to zależy co dokładnie robisz z tymi wartościami)

1 użytkowników online, w tym zalogowanych: 0, gości: 1