Skocz do zawartości
"Idzie nowe..." - o zmianach i nie tylko ×
Przeniesienie zakupów z IPS Marketplace / Moving bought items from IPS Marketplace ×
Hosting webh.pl - 20%

Widok dodanych zdjęć w temacie plików.

Majster87

Przez Majster87
w Ogólny support IPS4

 Udostępnij

Rekomendowane odpowiedzi

Majster87 Współpracownik

Majster87

Opublikowano
Opublikowano (edytowane)

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>

 

image.thumb.png.54e449762af471feb04dc2582fae4032.png

 

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 😕

Edytowane przez Majster87

logo.png.519590789bae8db2833a4ecc09316aef.png

  • Manager
DawPi Arcymistrz

DawPi

Opublikowano
  • Manager
Opublikowano

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 Współpracownik

Majster87

Opublikowano
  • Autor
Opublikowano
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

logo.png.519590789bae8db2833a4ecc09316aef.png

  • Manager
DawPi Arcymistrz

DawPi

Opublikowano
  • Manager
Opublikowano

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:

image.png

 

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 Współpracownik

Majster87

Opublikowano
  • Autor
Opublikowano (edytowane)
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:

image.png

 

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

 

image.thumb.png.677544a62d16da78c65ddb6544e93000.png

Edytowane przez Majster87

logo.png.519590789bae8db2833a4ecc09316aef.png

Majster87 Współpracownik

Majster87

Opublikowano
  • Autor
Opublikowano (edytowane)
10 godzin temu, DawPi napisał(a):

To już musisz grzebać. Chciałeś miniatury to masz. :P

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=">"
Edytowane przez Majster87

logo.png.519590789bae8db2833a4ecc09316aef.png

  • 2 tygodnie później...
  • Manager
DawPi Arcymistrz

DawPi

Opublikowano
  • Manager
Opublikowano

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.

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij
Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę.