PDA

Zobacz pełną wersję : Efekt zoom hover w artykułach



piasio
26-05-2019, 13:03
Jest jakiś dodatek który pozwala na powiększanie zdjęć w artykułach po najechaniu na nie kursorem..
Ewentualnie możecie polecić inny prosty dodatek który nada nieco "interaktywności" zdjęciom w artykułach ?

Jac
26-05-2019, 13:21
CSS3 transition image hover effects.

piasio
26-05-2019, 15:07
Dokładnie tego mi trzeba.. ale nie nie bardzo się znam na kodzie i nie mogę zaimplementować. Wrzucam kod css w plik custom.css lub dodaję w zapleczu szblonu helix ultimate - tam tez jest opcja custom css.. niestety przy wstawianiu obrazu w artykule nie pojawia mi się odpowiednie klasy do wyboru.. ręczne wpisanie też nic nie daje. Miałem nadzieje ze może jest jakiś dodatek co zrobi to automatycznie.

siristru
26-05-2019, 21:16
nie bardzo się znam na kodzie i nie mogę zaimplementować

Ale co stoi na przeszkodzie by się nauczyć? :) To nie jest fizyka jądrowa, każdy z nas się tego nauczył - możesz i Ty :D

piasio
26-05-2019, 22:19
Ale co stoi na przeszkodzie by się nauczyć? To nie jest fizyka jądrowa, każdy z nas się tego nauczył - możesz i Ty
Zgłębiam temat..

siristru
26-05-2019, 23:27
Super! Jak by co to pytaj na forum - doradzimy, pomożemy :)

piasio
27-05-2019, 00:07
A więc chcę dodać transition image hover effects..
Znalazłem między innymi taki kawałek kodu css..


* Zoom In #1 */
.hover01 figure img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover01 figure:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}

Wklepuję to w custom.css (w plik lub w odpowiednia sekcję) w szablonie Ultimate Helix.. niestety nie działa..
Patrzę filmiki na YT i dokumentację szablonu ale nadal czegoś brakuje..

Korek1
27-05-2019, 00:40
Musisz jeszcze odpowiednio otagować tekst w HTML i dopiero zadziała. Css i HTML są powiązane.


Wysłane za pomocą Tapatalk

siristru
27-05-2019, 01:27
Podaj linka strony na której efekt powinien być widoczny. Zobaczymy jak to się ma do struktury html.

piasio
28-05-2019, 15:09
generalnie to nie strona docelowa.. tutaj mogę sobie grzebać i testować.. ale ten sam szablon
http://www.psycholog.idl.pl/

siristru
28-05-2019, 16:29
No jasne, że kod nie będzie działał bo Ty nie masz tych klas http://prntscr.com/nugov1
Przy takiej strukturze to nawet nie ma się za bardzo o co "zahaczyć".
Ten obrazek jest po prostu osadzony w artykule.
Najlepiej skorzystać z obrazków wprowadzenia i rozwinięcia dostępnych w zakładce "Obrazki" podczas edycji artykułu.
Wtedy odpowiednio wskazać na klasy i dać im ten efekt.

piasio
28-05-2019, 18:33
Dokładnie w tym problem.. jeśli byłaby to kwestia dopisania do index.html tego stylu to chyba bym ogarnął.. (ale tu jest tylko index php i ma inną strukturę)
Można dodać poprzez custom.css klasy z powyższymi atrybutami ?
Natomiast z edytora (np. JCE) mogę przypisać obrazkom w artykule klasy które mam już zdefiniowane..
W wypadku wprowadzenia "obrazki i łacza --> ilustracja wprowadzenia" mogę tylko obraz wybrać.. i nie ma tam możliwości wyboru klas..

siristru
28-05-2019, 19:29
Można dodać poprzez custom.css klasy z powyższymi atrybutami ?

Tak ale w tym pliku tylko wpiszesz klasy opisujące strukturę HTML. Problem w tym, że tej struktury nie masz.


Natomiast z edytora (np. JCE) mogę przypisać obrazkom w artykule klasy które mam już zdefiniowane..
W wypadku wprowadzenia "obrazki i łacza --> ilustracja wprowadzenia" mogę tylko obraz wybrać.. i nie ma tam możliwości wyboru klas..

Ajajajaj ale w takim razie po co Ci CMS? Jak wszystko "z ręki" będziesz dodawał to możesz mieć zwykłą stronę w HTML. Po to jest CMS by pozwalał na zarządzanie treścią tj. tylko dodajesz obrazek a on się wyświetla w danym miejscu z odpowiednimi klasami.

To nie jest problem - problemem jest, ze nie potrafisz tego sam zrobić.

Rozwiązania są następujące:

1. Nauczysz się jak to zrobić
2. Ktoś Ci napisze instrukcję od A do Z
3. Ktoś to zrobi za Ciebie (najpewniej w jakiejś formie rozliczenia)

Sugerowałbym zacząć od opcji 1. W chwili obecnej moge pomóc nie pisząc instrukcji ale odsyłając do wątku gdzie omawiałem zbliżone rozwiązanie (dotyczyło filmów ale wykorzystywało te same pliki z Joomli oraz obrazek wprowadzenia): http://forum.joomla.pl/showthread.php?85999-Ikony-video-i-galerii-na-miniaturach-artyku%C5%82%C3%B3w&p=380618&viewfull=1#post380618