I am new to Onsen UI and Monaca. I really like it a lot. I am trying to build a carousel with small images (say 6em x 6em). Using ons-carousl and ons-carousel-items, I am able to achieve it. However, there is a wide gap between consecutive images. Like only 1 small image in the visible screen. The next becomes visible only after I slide full screen. I have tried margins and all but in vain.
Please Help !
My code :-
<ons-carousel width="auto" swipeable auto-scroll auto-scroll-ratio="0.2" animation="ease-in" overscrollable class="carousel1">
<ons-carousel-item>
<img class="car1" src="./images/banner4.png" />
</ons-carousel-item>
<ons-carousel-item>
<img class="car1 img-thumbnail" src="./images/banner4.png" />
</ons-carousel-item>
<ons-carousel-item>
<img class="car1 img-thumbnail" src="./images/banner4.png" />
</ons-carousel-item>
<ons-carousel-item>
<img class="car1 img-thumbnail" src="./images/banner4.png" />
</ons-carousel-item>
</ons-carousel>
Check out the Carousel below
Related
I'm trying to get a thing work for a week and no success. Really need some tips.
I have an Wordpress website built with Elementor.
This site has 10 different images with different links (they are links to stores that sell my product).
I'm trying to do something automatic in GTM that when I click on one of the stores (image with link), it shows me the variable - that is, the name of the store - that I added as an attribute in Elementor.
My question is whether it's possible to make this variable value show automatically so I don't have to create 10 different tags. I say this because I have 5 more sites in the same type of construction that I imagine I will have to do manually.
I followed this example and it almost worked - : https://www.youtube.com/watch?v=MUyJeRDKt0kThe problem is that he has a class naming, but I don't. I have only link attribute.
Something like this:
Product > Sells in Walgreens, Walmart, Costco, etc .
Attribute name and value:clickstore - wallgreensclickstore - Walmartetc.
Why I'm trying to do that? To mark as a conversion in GA4.
Any tips?Thanks a lot!
#BNazaruk
please se the image of the html
The tag fired, but doesn't populate the values automaticcaly!
#BNazaruk, sorry about the delay.
Please see below :)
That's an example with 2 stores.
Thanks a lot for the support!
<div class="elementor-element elementor-element-6511396 e-container--column e-container" data-id="6511396" data-element_type="container"> <div class="elementor-element elementor-element-4ea1df3 elementor-widget elementor-widget-image" data-id="4ea1df3" data-element_type="widget" cliquefarma="Store1" data-widget_type="image.default">
<div class="elementor-widget-container">
<div class="elementor-image">
<a href="link for store 1" target="_blank" rel="nofollow noopener" cliquefarma1="Store1">
<img decoding="async" width="220" height="157" src="storeimage1.jpg" class="attachment-large size-large" alt="" loading="lazy" /> </a>
</div>
</div>
</div>
</div><div class="elementor-element elementor-element-715f6ca e-container--column e-container" data-id="715f6ca" data-element_type="container"> <div class="elementor-element elementor-element-92cd80b elementor-widget elementor-widget-image" data-id="92cd80b" data-element_type="widget" id="cfarmacia1" cliquefarma="Store 2" data-widget_type="image.default">
<div class="elementor-widget-container">
<div class="elementor-image">
<a href="store 2 link" target="_blank" rel="nofollow noopener" cliquefarma1="Store 2">
<img decoding="async" width="220" height="157" src="storeimage2.jpg" class="attachment-large size-large" alt="" loading="lazy" /> </a>
</div>
</div>
</div>
</div>
I am using the react-rating package in my Nextjs application and I want to use a custom icon both for the emptySymbol and fullSymbol of the Rating component.
The problem is when the rating is a decimal value like 3.7, the custom icon does not show up correctly.
<Rating
start={0}
stop={5}
step={1}
direction="ltr"
readonly={true}
initialRating={3.7}
emptySymbol={
<Image src={"/assets/empty-star.svg"} width={16} height={16} alt="" />
}
fullSymbol={
<Image src={"/assets/full-star.svg"} width={16} height={16} alt="" />
}
fractions={10}
/>
And the outcome is the picture below:
It seems that react-rating make the custom icon smaller instead of filling portion of it.
What I want to achieve is the same behavior as the default icons have: (below picture)
Thanks to #DBS 's comment which somehow led me to the answer.
I am also using tailwindcss in my project. so the style max-width: 100%; was being overridden by #tailwind base; which led to this incorrect display of the "half-filled star".
And also for this specific situation, i used HTML native tag instead of the Nextjs Image component.
The final solution was:
<div className="Custom-rating">
<Rating
start={0}
stop={5}
step={1}
direction="ltr"
readonly={true}
initialRating={3.7}
emptySymbol={
<img src={"/assets/empty-star.svg"} width={16} height={16} alt="" />
}
fullSymbol={
<img src={"/assets/full-star.svg"} width={16} height={16} alt="" />
}
fractions={10}
/>
</div>
And global.css file:
.Custom-rating img {
max-width: none !important;
}
So currently I have this functionality where I have a Component that uploads images, and it takes up the full width.
But when I click it, the view becomes a grid-view with two columns, where my component now resizes to fill the first row, first column, while the images uploaded will take up the other spaces (so starting from first row, second column -- then second row, first column and so on.
So my problem is now that I want my images to be draggable, which is wrapped around in a draggable tag, but how can I do this but maintain it for just the images?
My code is as follows (I'm using tailwindCSS and Vue btw):
<div>
<draggable v-model="images" v-bind="dragOptions" draggable=".item">
<transition-group
:class="
images.length == 0 ? '' : 'grid sm:grid-cols-4 grid-cols-2 gap-4'
"
>
<ImageUploader
#addImage="addImage"
ref="deleteRef"
:key="'uploader'"
:shouldShowLabel="images.length != 0"
:class="images.length == 0 ? 'mt-4 flex-grow' : 'flex'"
/>
<div
v-for="image in images"
:key="image.url"
#click="deleteImage(image)"
:class="'item'"
class="cursor-pointer p-2 shadow-lg rounded-md "
>
<figure class="image overflow-hidden relative cursor-pointer">
<img
:src="image.url"
:width="image.width"
:height="image.height"
alt=""
/>
</figure>
</div>
</transition-group>
</draggable>
</div>
I have some images to illustrate:
Before Upload:
After Upload:
So the thing is when I shift my images, my images array will have an undefined element, which I suspect to be from the ImageUploader component. Is there any way I can take it out so it is not draggable (so the images array will not be corrupted?). Right now I'm making my ImageUploader Component not draggable by using a different key, but yeah.
TLDR: I need my view to look like a grid with 2 columns, but i only want my elements after the first one to be wrapped in my vue draggable so they can be dragged except for the first element.
Much appreciated!!
I'm not really sure what you mean. But to my understanding you don't want your <ImageUploader/> component to be draggable?
Try moving it outside of the draggable component. :)
<div>
<ImageUploader
#addImage="addImage"
ref="deleteRef"
:key="'uploader'"
:shouldShowLabel="images.length != 0"
:class="images.length == 0 ? 'mt-4 flex-grow' : 'flex'"
/>
<draggable v-model="images" v-bind="dragOptions" draggable=".item">
<transition-group
:class="
images.length == 0 ? '' : 'grid sm:grid-cols-4 grid-cols-2 gap-4'
"
>
<div
v-for="image in images"
:key="image.url"
#click="deleteImage(image)"
:class="'item'"
class="cursor-pointer p-2 shadow-lg rounded-md "
>
<figure class="image overflow-hidden relative cursor-pointer">
<img
:src="image.url"
:width="image.width"
:height="image.height"
alt=""
/>
</figure>
</div>
</transition-group>
</draggable>
</div>
I am using SwiperJS for some galleries in my custom build Wordpress website. I am also using a plugin for lazy loading all my images, so the SwiperJS' own lazy load is disabled. However, now when the images are swiped and loading, there isn't any spinner to indicate that something is happening. Question is, how can I add this spinner with javascript myself.
Lets say now there is this rendered in the DOM:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="1" role="group" aria-label="3 / 7" style="width: 624px;">
<img src="path/to/src.jog" alt="" class="lazyloaded" data-ll-status="loaded">
</div>
<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="2" role="group" aria-label="4 / 7" style="width: 624px;">
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="//localhost:3000/wp-content/uploads/2021/04/K0924-900x1200.jpg">
</div>
</div>
</div>
Slide, that is currently showing has the class class="swiper-slide-active" and the next one has class="swiper-slide-next"
When I swipe (or press the next arrow), the class class="swiper-slide-next" changes to class="swiper-slide-active" and its child, img tag receives the class class="lazyloading" and data-ll-status="loading"
After the image is loaded it changes to class="lazyloaded" data-ll-status="loaded"
Now, how can I track with javascript the moment, when the img tag inside the div with the class class="swiper-slide-active" receives the class class="lazyloading" or data-ll-status="loading", when that happens render inside <div class="swiper-wrapper"> </div> a spinner and when the class="lazyloading" changes to class="lazyloaded" remove the spinner?
I would greatly appreciate any help! Thank you!
I'm not sure that i understood your problem right :
You need to get a spinner when the image is loading ?
Check on https://swiperjs.com/swiper-api#lazy-loading for the "swiper-lazy-preloader".
It should look like this :
<div class="swiper">
<div class="swiper-wrapper">
<!-- Lazy image -->
<div class="swiper-slide">
<img data-src="path/to/picture-1.jpg" class="swiper-lazy" />
<div class="swiper-lazy-preloader"></div>
</div>
</div>
</div>
I want to add a different attribute value to each image, So that Image one has an attribute of image-1, Image 2 has an attribute of image-2, and so on.
Any help would be appreciated.
I am new to Drupal and have no idea where to start.
I can add a single attribute to all the images.
This is how my image.html.twig currently looks like:
<img{{ attributes.addClass(classes) }}/>
This is what I am trying to achive:
<img src="path to image" onclick="currentSlide(1)"
<img src="path to image" onclick="currentSlide(2)"
<img src="path to image" onclick="currentSlide(3)"
I got as far as this:
<img src="path to image" onclick="currentSlide(1)"
<img src="path to image" onclick="currentSlide(1)"
<img src="path to image" onclick="currentSlide(1)"
This how you can add different attributes
<img{{ attributes.setAttribute('onclick', 'currentSlide(1)') }}/>