Majster87 Posted August 17, 2024 Posted August 17, 2024 (edited) Mam mały problem wszystko edytowałem ale chyba gdzieś popełniłem błąd w wyświetlaniu obrazków, jak to naprawić żeby działało? Orginalny html tego: <section> <h2 class='ipsType_sectionTitle ipsType_reset ipsHide'>{lang="screenshots_ct" pluralize="$file->screenshots()->getInnerIterator()->count()"}</h2> <div class='ipsPadding1'> <div class='ipsCarousel ipsClearfix' data-ipsCarousel data-ipsCarousel-showDots> <div class='ipsCarousel_inner'> <ul class='cDownloadsCarousel ipsClearfix' data-role="carouselItems"> {{$fullScreenshots = iterator_to_array( $file->screenshots() );}} {{foreach $file->screenshots( 1 ) as $id => $screenshot}} <li class='ipsCarousel_item' data-ipsLazyLoad> <span {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}'{{else}}style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="ipsThumb ipsThumb_medium ipsThumb_bg ipsCursor_pointer" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"> <img {{if settings.lazy_load_enabled}}src='{expression="\IPS\Text\Parser::blankImage()"}' data-{{endif}}src="{$screenshot->url}" alt=""> </span> </li> {{endforeach}} </ul> </div> <span class='ipsCarousel_shadow ipsCarousel_shadowLeft'></span> <span class='ipsCarousel_shadow ipsCarousel_shadowRight'></span> <a href='#' class='ipsCarousel_nav ipsHide' data-action='prev'><i class='fa fa-chevron-left'></i></a> <a href='#' class='ipsCarousel_nav ipsHide' data-action='next'><i class='fa fa-chevron-right'></i></a> </div> </div> </section> Edytowany: <section> <div x-data="glideSlider()"> <div x-ref="glide" class="glide glide--swipeable glide--ltr glide--carousel"> <div data-glide-el="track" class="glide__track rounded-10" @click.stop="() => { $dispatch('modal-box:open', 'fullscreen-slider') $dispatch('fullscreen-slider:update', { startAt: glide.index }) }"> <ul class="glide__slides"> <li class="glide__slide" data-ipsLazyLoad> <div class="aspect-w-16 aspect-h-9"> {{foreach $file->screenshots( 2 ) as $id => $screenshot}} <img {{if settings.lazy_load_enabled}}src='{expression="\IPS\Text\Parser::blankImage()"}' data-{{endif}}src="{$screenshot->url}" alt=""> {{endforeach}} </div> </li> </ul> </div> <div data-glide-el="controls" class="glide__arrows"> <button data-glide-dir="<" type="button" class="glide__arrow glide__arrow--left btn btn-square btn-surface-2 border border-surface-3 rounded-12 hover:scale-110 active:hover:scale-95 transition-all drop-shadow-md absolute -left-20 _xs:left-10 top-1/2 transform -translate-y-1/2 _xs:hidden"> <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.71 6.71c-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41z"/></svg></button> <button data-glide-dir=">" type="button" class="glide__arrow glide__arrow--right btn btn-square btn-surface-2 border border-surface-3 rounded-12 hover:scale-110 active:hover:scale-95 transition-all drop-shadow-md absolute -right-20 top-1/2 transform -translate-y-1/2 _xs:hidden"> <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z"/></svg></button> </div> <div data-glide-el="controls[nav]" class="glide__bullets flex space-x-8 _xs:space-x-5 absolute bottom-10 left-1/2 transform -translate-x-1/2"> <button type="button" data-glide-dir="=0" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"></button> <button type="button" data-glide-dir="=0" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=1" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"></button> <button type="button" data-glide-dir="=1" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=2" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"></button> <button type="button" data-glide-dir="=2" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=3" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"></button> <button type="button" data-glide-dir="=3" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=4" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"></button> <button type="button" data-glide-dir="=4" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=5" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"></button> <button type="button" data-glide-dir="=5" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> </div> </div> </div> </section> Orginalny kod tych miniaturek bo troche pozmieniałem zanim wkleiłem tutaj... <div data-glide-el="controls[nav]" class="glide__bullets flex space-x-8 _xs:space-x-5 absolute bottom-10 left-1/2 transform -translate-x-1/2"> <button type="button" data-glide-dir="=0" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" style="background-image: url(ADRES IMG)" class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100"></button> <button type="button" data-glide-dir="=0" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=1" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" style="background-image: url(ADRES IMG)" class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100"></button> <button type="button" data-glide-dir="=1" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=2" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" style="background-image: url(ADRES IMG)" class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100"></button> <button type="button" data-glide-dir="=2" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=3" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" style="background-image: url(ADRES IMG)" class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100"></button> <button type="button" data-glide-dir="=3" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=4" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" style="background-image: url(ADRES IMG)" class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100"></button> <button type="button" data-glide-dir="=4" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=5" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" style="background-image: url(ADRES IMG)" class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100"></button> <button type="button" data-glide-dir="=5" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> </div> na dole na poglądzie powinny być miniaturki jakie są dodane a daje pierwsze zdjęcie . Pros\e o pomoc z tym walczę już 6h i nic nie zdziałałem 😕 Edited August 17, 2024 by Majster87
Manager DawPi Posted August 18, 2024 Manager Posted August 18, 2024 No a jak ma wyświetlić co innego, jak niżej masz ten sam kod wszędzie: <div data-glide-el="controls[nav]" class="glide__bullets flex space-x-8 _xs:space-x-5 absolute bottom-10 left-1/2 transform -translate-x-1/2"> <button type="button" data-glide-dir="=0" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"></button> <button type="button" data-glide-dir="=0" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=1" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"></button> <button type="button" data-glide-dir="=1" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=2" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"></button> <button type="button" data-glide-dir="=2" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=3" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"></button> <button type="button" data-glide-dir="=3" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=4" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"></button> <button type="button" data-glide-dir="=4" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=5" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"></button> <button type="button" data-glide-dir="=5" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> </div> </div> </div> W oryginale masz to w pętli foreach: {{foreach $file->screenshots( 1 ) as $id => $screenshot}} <li class='ipsCarousel_item' data-ipsLazyLoad> <span {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}'{{else}}style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="ipsThumb ipsThumb_medium ipsThumb_bg ipsCursor_pointer" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"> <img {{if settings.lazy_load_enabled}}src='{expression="\IPS\Text\Parser::blankImage()"}' data-{{endif}}src="{$screenshot->url}" alt=""> </span> </li> {{endforeach}} Daj swój aktualny kod to może się coś wykmini. intermedia - profesjonalne rozwiązania Invision Power Board --- Chcesz uzyskać szybko i sprawnie pomoc? Uzupełnij wersję i adres w profilu.
Majster87 Posted August 18, 2024 Author Posted August 18, 2024 11 minut temu, DawPi napisał(a): Daj swój aktualny kod to może się coś wykmini. <section> <div x-data="glideSlider()"> <div x-ref="glide" class="glide glide--swipeable glide--ltr glide--carousel"> <div data-glide-el="track" class="glide__track rounded-10" @click.stop="() => { $dispatch('modal-box:open', 'fullscreen-slider') $dispatch('fullscreen-slider:update', { startAt: glide.index }) }"> <ul class="glide__slides"> <li class="glide__slide" data-ipsLazyLoad> <div class="aspect-w-16 aspect-h-9"> {{foreach $file->screenshots( 2 ) as $id => $screenshot}} <img {{if settings.lazy_load_enabled}}src='{expression="\IPS\Text\Parser::blankImage()"}' data-{{endif}}src="{$screenshot->url}" alt=""> {{endforeach}} </div> </li> </ul> </div> <div data-glide-el="controls" class="glide__arrows"> <button data-glide-dir="<" type="button" class="glide__arrow glide__arrow--left btn btn-square btn-surface-2 border border-surface-3 rounded-12 hover:scale-110 active:hover:scale-95 transition-all drop-shadow-md absolute -left-20 _xs:left-10 top-1/2 transform -translate-y-1/2 _xs:hidden"> <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.71 6.71c-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41z"/></svg></button> <button data-glide-dir=">" type="button" class="glide__arrow glide__arrow--right btn btn-square btn-surface-2 border border-surface-3 rounded-12 hover:scale-110 active:hover:scale-95 transition-all drop-shadow-md absolute -right-20 top-1/2 transform -translate-y-1/2 _xs:hidden"> <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z"/></svg></button> </div> <div data-glide-el="controls[nav]" class="glide__bullets flex space-x-8 _xs:space-x-5 absolute bottom-10 left-1/2 transform -translate-x-1/2"> <button type="button" data-glide-dir="=0" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"></button> <button type="button" data-glide-dir="=0" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=1" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"></button> <button type="button" data-glide-dir="=1" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=2" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"></button> <button type="button" data-glide-dir="=2" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=3" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"></button> <button type="button" data-glide-dir="=3" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=4" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"></button> <button type="button" data-glide-dir="=4" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> <button type="button" data-glide-dir="=5" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"></button> <button type="button" data-glide-dir="=5" :class="{ '!w-30 !opacity-100': isActiveItem() }" class="hidden _xs:block w-8 h-8 opacity-60 rounded-full bg-white transition-all"></button> </div> </div> </div> </section> i tu pewnie tez zjebałem bo nie da sie przełaczyc albo dlatego ze te na dole sa takie same 😕 {{foreach $file->screenshots( 2 ) as $id => $screenshot}} <img {{if settings.lazy_load_enabled}}src='{expression="\IPS\Text\Parser::blankImage()"}' data-{{endif}}src="{$screenshot->url}" alt=""> {{endforeach}} css mogę ci na pw podesłać jak potrzebne
Manager DawPi Posted August 20, 2024 Manager Posted August 20, 2024 Czekaj, jaki jest problem? Że karuzela pokazuje tę samą grafikę, tak? intermedia - profesjonalne rozwiązania Invision Power Board --- Chcesz uzyskać szybko i sprawnie pomoc? Uzupełnij wersję i adres w profilu.
Majster87 Posted August 20, 2024 Author Posted August 20, 2024 34 minuty temu, DawPi napisał(a): Czekaj, jaki jest problem? Że karuzela pokazuje tę samą grafikę, tak? tak
Manager DawPi Posted August 20, 2024 Manager Posted August 20, 2024 No tak jak pisałem. A może tak: <section> <div x-data="glideSlider()"> <div x-ref="glide" class="glide glide--swipeable glide--ltr glide--carousel"> <div data-glide-el="track" class="glide__track rounded-10"> <ul class="glide__slides"> <li class="glide__slide" data-ipsLazyLoad> <div class="aspect-w-16 aspect-h-9"> {{$fullScreenshots = iterator_to_array( $file->screenshots() );}} {{foreach $file->screenshots( 2 ) as $id => $screenshot}} <img {{if settings.lazy_load_enabled}}src='{expression="\IPS\Text\Parser::blankImage()"}' data-{{endif}}src="{$screenshot->url}" alt=""> {{endforeach}} </div> </li> </ul> </div> <div data-glide-el="controls" class="glide__arrows"> <button data-glide-dir="<" type="button" class="glide__arrow glide__arrow--left btn btn-square btn-surface-2 border border-surface-3 rounded-12 hover:scale-110 active:hover:scale-95 transition-all drop-shadow-md absolute -left-20 _xs:left-10 top-1/2 transform -translate-y-1/2 _xs:hidden"> <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.71 6.71c-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41z"/></svg></button> <button data-glide-dir=">" type="button" class="glide__arrow glide__arrow--right btn btn-square btn-surface-2 border border-surface-3 rounded-12 hover:scale-110 active:hover:scale-95 transition-all drop-shadow-md absolute -right-20 top-1/2 transform -translate-y-1/2 _xs:hidden"> <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z"/></svg></button> </div> <div data-glide-el="controls[nav]" class="glide__bullets flex space-x-8 _xs:space-x-5 absolute bottom-10 left-1/2 transform -translate-x-1/2"> {{$i = 0;}} {{foreach $file->screenshots( 2 ) as $id => $screenshot}} <button type="button" data-glide-dir="={$i}" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$screenshot->url}}"></button> {{$i++;}} {{endforeach}} </div> </div> </div> </section> I masz wtedy tak: Tylko dodaj sobie ten kod: W dniu 18.08.2024 o 11:56, Majster87 napisał(a): @click.stop="() => { $dispatch('modal-box:open', 'fullscreen-slider') $dispatch('fullscreen-slider:update', { startAt: glide.index }) }" Bo go usuwałem. intermedia - profesjonalne rozwiązania Invision Power Board --- Chcesz uzyskać szybko i sprawnie pomoc? Uzupełnij wersję i adres w profilu.
Majster87 Posted August 20, 2024 Author Posted August 20, 2024 (edited) 1 godzinę temu, DawPi napisał(a): No tak jak pisałem. A może tak: <section> <div x-data="glideSlider()"> <div x-ref="glide" class="glide glide--swipeable glide--ltr glide--carousel"> <div data-glide-el="track" class="glide__track rounded-10"> <ul class="glide__slides"> <li class="glide__slide" data-ipsLazyLoad> <div class="aspect-w-16 aspect-h-9"> {{$fullScreenshots = iterator_to_array( $file->screenshots() );}} {{foreach $file->screenshots( 2 ) as $id => $screenshot}} <img {{if settings.lazy_load_enabled}}src='{expression="\IPS\Text\Parser::blankImage()"}' data-{{endif}}src="{$screenshot->url}" alt=""> {{endforeach}} </div> </li> </ul> </div> <div data-glide-el="controls" class="glide__arrows"> <button data-glide-dir="<" type="button" class="glide__arrow glide__arrow--left btn btn-square btn-surface-2 border border-surface-3 rounded-12 hover:scale-110 active:hover:scale-95 transition-all drop-shadow-md absolute -left-20 _xs:left-10 top-1/2 transform -translate-y-1/2 _xs:hidden"> <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.71 6.71c-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41z"/></svg></button> <button data-glide-dir=">" type="button" class="glide__arrow glide__arrow--right btn btn-square btn-surface-2 border border-surface-3 rounded-12 hover:scale-110 active:hover:scale-95 transition-all drop-shadow-md absolute -right-20 top-1/2 transform -translate-y-1/2 _xs:hidden"> <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z"/></svg></button> </div> <div data-glide-el="controls[nav]" class="glide__bullets flex space-x-8 _xs:space-x-5 absolute bottom-10 left-1/2 transform -translate-x-1/2"> {{$i = 0;}} {{foreach $file->screenshots( 2 ) as $id => $screenshot}} <button type="button" data-glide-dir="={$i}" :class="{ '!opacity-100 !w-73 !h-41': isActiveItem() }" {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}' {{else}} style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="_xs:hidden w-64 h-36 rounded-8 overflow-hidden flex-shrink-0 self-end bg-cover bg-center transition-all cursor-pointer opacity-60 hover:opacity-100" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$screenshot->url}}"></button> {{$i++;}} {{endforeach}} </div> </div> </div> </section> I masz wtedy tak: Tylko dodaj sobie ten kod: Bo go usuwałem. No pokazuje jak powinno ale dziwne ze od ostatniego zdjęcia i nie działa to przełączanie a jest w svg a dodane wszystko w css a robilem je z poradnika znalezionego w necie 😕 i po kliknięciu w miniaturkę nawet pokazuje tak Edited August 20, 2024 by Majster87
Manager DawPi Posted August 21, 2024 Manager Posted August 21, 2024 To już musisz grzebać. Chciałeś miniatury to masz. intermedia - profesjonalne rozwiązania Invision Power Board --- Chcesz uzyskać szybko i sprawnie pomoc? Uzupełnij wersję i adres w profilu.
Majster87 Posted August 21, 2024 Author Posted August 21, 2024 (edited) 10 godzin temu, DawPi napisał(a): To już musisz grzebać. Chciałeś miniatury to masz. jaka data odpowiada w ips za next i prev? bo juz wiem gdzie zrobiłem bład ze nie chce przełanczać bo zamiast daty klasy dałem < <button data-glide-dir="<" <button data-glide-dir=">" Edited August 21, 2024 by Majster87
Manager DawPi Posted August 22, 2024 Manager Posted August 22, 2024 11 godzin temu, Majster87 napisał(a): jaka data odpowiada w ips za next i prev Jaka data? Nie rozumiem. intermedia - profesjonalne rozwiązania Invision Power Board --- Chcesz uzyskać szybko i sprawnie pomoc? Uzupełnij wersję i adres w profilu.
Majster87 Posted August 30, 2024 Author Posted August 30, 2024 W dniu 22.08.2024 o 10:01, DawPi napisał(a): Jaka data? Nie rozumiem. klasa
Manager DawPi Posted August 30, 2024 Manager Posted August 30, 2024 Nawet sam to podałeś w jednym z poprzednich postów: <div class='ipsCarousel ipsClearfix' data-ipsCarousel data-ipsCarousel-showDots> <div class='ipsCarousel_inner'> <ul class='cDownloadsCarousel ipsClearfix' data-role="carouselItems"> {{$fullScreenshots = iterator_to_array( $file->screenshots() );}} {{foreach $file->screenshots( 1 ) as $id => $screenshot}} <li class='ipsCarousel_item' data-ipsLazyLoad> <span {{if settings.lazy_load_enabled}}data-background-src='{backgroundimage="$screenshot->url"}'{{else}}style='background-image: url({backgroundimage="$screenshot->url"})'{{endif}} class="ipsThumb ipsThumb_medium ipsThumb_bg ipsCursor_pointer" data-ipsLightbox data-ipsLightbox-group="download_{$file->id}" data-fullURL="{$fullScreenshots[ $id ]->url}"> <img {{if settings.lazy_load_enabled}}src='{expression="\IPS\Text\Parser::blankImage()"}' data-{{endif}}src="{$screenshot->url}" alt=""> </span> </li> {{endforeach}} </ul> </div> <span class='ipsCarousel_shadow ipsCarousel_shadowLeft'></span> <span class='ipsCarousel_shadow ipsCarousel_shadowRight'></span> <a href='#' class='ipsCarousel_nav ipsHide' data-action='prev'><i class='fa fa-chevron-left'></i></a> <a href='#' class='ipsCarousel_nav ipsHide' data-action='next'><i class='fa fa-chevron-right'></i></a> </div> intermedia - profesjonalne rozwiązania Invision Power Board --- Chcesz uzyskać szybko i sprawnie pomoc? Uzupełnij wersję i adres w profilu.
Manager DawPi Posted August 30, 2024 Manager Posted August 30, 2024 Lefty i Righty jak mniemam. intermedia - profesjonalne rozwiązania Invision Power Board --- Chcesz uzyskać szybko i sprawnie pomoc? Uzupełnij wersję i adres w profilu.
Majster87 Posted January 11 Author Posted January 11 cos mi sie udało wytworzyc ale co zrobic zeby pokazywalo duzy podglad od razu a nie po wybraniu zdjiecia? {{if $file->screenshots()->getInnerIterator()->count()}} <section> <h2 class='ipsType_sectionTitle ipsType_reset ipsHide'> {lang="screenshots_ct" pluralize="$file->screenshots()->getInnerIterator()->count()"} </h2> <div class='ipsPadding1'> <div class="preview-container"> <!-- Duży podgląd --> <div class="large-preview" id="largePreview"> {{$firstScreenshot = $file->screenshots(1)->first();}} <img src="{$firstScreenshot->url}" alt="Main Preview" class="preview-image"> </div> <!-- Miniaturki w pionie --> <div class='thumbnails'> <ul> {{foreach $file->screenshots() as $id => $screenshot}} <li class='thumbnail-item'> <img src="{$screenshot->url}" alt="Thumbnail" class="thumbnail-image" onclick="changePreview('{$screenshot->url}')"> </li> {{endforeach}} </ul> </div> </div> </div> </section> <script> function changePreview(imageUrl) { const largePreview = document.getElementById('largePreview'); largePreview.querySelector('img').src = imageUrl; } </script> {{endif}} Po wejsciu do tematu: Po kliknieciu w miniaturke pokazuje
Majster87 Posted January 12 Author Posted January 12 (edited) Temat można zamknąć poradziłem sobie z tym. w ten sposób uzyskałem duży podgląd i przez css ukrycie dodatkowych co się pod spodem wyświetlały {{foreach $file->screenshots(1) as $id => $screenshot}} <img src="{$screenshot->url}" alt="Main Preview" class="preview-image"> {{endforeach}} Edited January 12 by Majster87 1
Manager DawPi Posted January 13 Manager Posted January 13 Problem ROZWIĄZANY. Jeśli są jakiekolwiek wątpliwości, pytania proszę o założenie nowego tematu. Wszelkie uzasadnione reklamacje/pretensje/sugestie/rady przyjmuje ekipa forum. intermedia - profesjonalne rozwiązania Invision Power Board --- Chcesz uzyskać szybko i sprawnie pomoc? Uzupełnij wersję i adres w profilu.
Recommended Posts