Wczytywanie kilku galerii naraz oraz w zależności od szerokości ekranu

0

Witajcie, mam takie dwa problemy związane ze stroną którą prowadzę.

Pierwszy z nich:
Otóż znalazłem ostatnio galerię która wrzuciłem na stronę. Do jej wywoływania mam taki oto skrypt:

jQuery(function(){
                jQuery('#camera_wrap_1').camera({
                        thumbnails: true
                });   
                
                
                jQuery('#camera_wrap_2').camera({
                        thumbnails: true
                });
                
                
                jQuery('#camera_wrap_3').camera({
                        thumbnails: true
                });
                
                
                jQuery('#camera_wrap_4').camera({
                        thumbnails: true
                });
                
                
                jQuery('#camera_wrap_5').camera({
                        thumbnails: true
                });
                
                
                jQuery('#camera_wrap_6').camera({
                        thumbnails: true
                });                
            });

Problem jest taki, że te galerię wpływają na siebie, co doskonale widać bezpośrednio na stronie: http://www.apartamentypoddzikowcem.pl/oferta.php Z tego co czytałem, to pomagłaby tu zapewne asynchroniczność, jednak za bardzo nie wiem jak ją tutaj zastosować.

Drugi problem:
Na stronie głównej http://www.apartamentypoddzikowcem.pl/ mam także jedną galerię. Przygotowałem też w pliku CSS wersję strony na smartfony, gdzie wyświetla się o wiele więcej informacji, i także chciałem zamieścić wcześniej wspomniane galerię. Oprócz wspomnianego wyżej problemu dochodzi też drugi, że chciałbym odpalać te skrypty tylko w momencie kiedy szerokość ekranu jest mniejsza bądź równa pewnej wartości. Zrobiłem taką oto funkcję wywoływaną w divie za pomocą onresize:

jQuery(function(){
                jQuery('#camera_wrap_1').camera({
                        thumbnails: true
                });
            });        
            function mobile()
            {
                var w = window.outerWidth;
                if (w<=680)
                {
                    jQuery(function(){
                
                jQuery('#camera_wrap_2').camera({                        
                        thumbnails: true
                });

                jQuery('#camera_wrap_3').camera({
                        thumbnails: true
                });

                jQuery('#camera_wrap_4').camera({
                        thumbnails: true
                });

                jQuery('#camera_wrap_5').camera({
                        thumbnails: true
                });

                jQuery('#camera_wrap_6').camera({
                        thumbnails: true
                });

                jQuery('#camera_wrap_7').camera({
                        thumbnails: true
                });
                }
            }      
        });

Jednak z tego co widzę to nie sprawdza się. I tu także następuje pytanie jak mógłbym to poprawić?

3
  1. Zdjęcia są bardzo, bardzo ciężkie. Każde zajmuje 3 - 4 MB, a ładuje się ich tam 6 jednocześnie, po kilku sekundach ładują się kolejne. W sumie puszczasz w eter 200MB. Tutaj żadna asynchroniczność nie pomoże, ponieważ web-developerowi zwyczajnie zabrakło zdrowego rozsądku. Zacznij od zmniejszenia zdjęć w programie graficznym, ponieważ nie potrzebujesz zdjęć w pełnej rozdzielczości, jeżeli na ekranie wyświetlasz zmniejszone zdjęcia o szerokości < 680px. Poza tym ten plugin jquery.camera z tego co widzę nie jest przystosowana do wyświetlania kilku galerii jednocześnie. Galerie, które nie są widoczne nie powinny w ogóle przeładowywać zdjęć, ponieważ użytkownik i tak ich nie widzi.
  2. Życie byłoby łatwiejsze gdybyś nauczył się korzystać z narzędzi developerskich. Gdy naciśniesz F12 w przeglądarce np. Chrome otworzą się narzędzia developerskie, w tym konsola. Z kolei w konsoli można odczytać, że brakuje zamykającego nawiasu okrągłego w linii 574 dlatego też ten warunek na window.outerwidth nie działa i galeria wyświetla się zawsze.
0
Haskell napisał(a):
  1. Zdjęcia są bardzo, bardzo ciężkie. Każde zajmuje 3 - 4 MB, a ładuje się ich tam 6 jednocześnie, po kilku sekundach ładują się kolejne. W sumie puszczasz w eter 200MB. Tutaj żadna asynchroniczność nie pomoże, ponieważ web-developerowi zwyczajnie zabrakło zdrowego rozsądku. Zacznij od zmniejszenia zdjęć w programie graficznym, ponieważ nie potrzebujesz zdjęć w pełnej rozdzielczości, jeżeli na ekranie wyświetlasz zmniejszone zdjęcia o szerokości < 680px. Poza tym ten plugin jquery.camera z tego co widzę nie jest przystosowana do wyświetlania kilku galerii jednocześnie. Galerie, które nie są widoczne nie powinny w ogóle przeładowywać zdjęć, ponieważ użytkownik i tak ich nie widzi.
  2. Życie byłoby łatwiejsze gdybyś nauczył się korzystać z narzędzi developerskich. Gdy naciśniesz F12 w przeglądarce np. Chrome otworzą się narzędzia developerskie, w tym konsola. Z kolei w konsoli można odczytać, że brakuje zamykającego nawiasu okrągłego w linii 574 dlatego też ten warunek na window.outerwidth nie działa i galeria wyświetla się zawsze.

Zastosowałem twoją radę co rozmiaru zdjęć, szybkość ładowania znacznie wzrosła, jeszcze tylko pokombinuję by na telefonie wyświetlał się drugi zestaw zdjęć z jeszcze niższą rozdzielczością. Co do pluginu to póki co go zostawię, nie chcę na razie robić jeszcze większego zamieszania, choć jeśli znasz jakiś lepszy umożliwiający właśnie wyświetlanie paru galerii to chętnie bym go przetestował.

Natomiast co do drugiego to dzięki za te narzędzia deweloperskie, już poprawiłem kod.

0

A i jeszcze taka jedna malutka sprawa - kiedy otwiera się tą stronę na telefonie w orientacji pionowej to zawsze jest ona trochę ucięta i trzeba ją pomniejszać palcami. Czy da się to jakoś zrobić, żeby strona zawsze otwierała się w pełni jak po tym własnym pomniejszeniu?

1

Tu jest galeria, która rozwiązuje wszystkie Twoje problemy :-)
https://vg.3n.com.pl

Kilka galerii na jednej stronie:
https://vg.3n.com.pl/code_9.htm

Ładowanie zdjęcia kolejnego w czasie, gdy oglądasz zdjęcie bieżące.
Tu przykład galerii z kilkuset zdjęciami (na starcie zaciągane są tylko miniatury:).
Kreator galerii wygeneruje Ci miniatury automatycznie.
https://vg.3n.com.pl/gallery/mountains

Automatyczne panoramowanie:
https://vg.3n.com.pl/gallery/Jawor/

Podpisy do zdjęć:
https://vg.3n.com.pl/gallery/txt

Pełna dokumentacja w języku polskim.
Żadnych dodatkowych bibliotek. Strona zaciąga jeden plik js 130 KB
Lista zdjęć w osobnym pliku (nie edytujesz strony, żeby zmienić zdjęcia).
Prawie żadnej ingerencji w kod strony (tworzysz jedynie jednego div-a, do którego galeria się podpina i umieszczasz krótki kod ładujący i uruchamiający galerię, pozostałe potrzebne elementy galeria tworzy sama).
Responsywność i praca na urządzeniach dotykowych.
I do tego support i pomoc w zainstalowaniu i uruchomieniu (również w języku polskim :-) ).

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