I'm working on a thumbnail carousel using bootstrap carousel. However I need to modify the data-slide behaviour as I'm pulling in the carousel items dynamically.
So what I'm trying to do is add an ID (something like 3672764 which will be the image ID) to the data-slide-to attribute and on clicking on the thumbnail it should slide to the slide that has the same ID.
This is the code:
<div id="carousel" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="item active srle" data-id="{{ image.id }}">
<img src="{{ featured_image | img_url: '1000x1000' }}" alt="{{ featured_image.alt | escape }}" data-product-featured-image>
<p>{{ featured_image.alt | escape }}</p>
</div>
{% for image in product.images offset:1 %}
<div class="item" data-id="{{ image.id }}">
<img src="{{ image.src | img_url: '1000x1000' }}" alt="{{ image.alt | escape }}">
<p>{{ image.alt | escape }}</p>
</div>
{% endfor %}
</div>
</div>
<div id="thumbcarousel" class="carousel slide thumbnails-carousel vertical" data-ride="false">
<div class="carousel-inner">
{% for image in product.images %}
<div class="grid__item carousel-padding">
<div data-target="#carousel" data-slide-to="{{ image.id }}" class="thumb"><img src="{{ image.src | img_url: '160x160' }}" alt="{{ image.alt | escape }}" data-product-single-thumbnail>
</div>
</div>
{% endfor %}
</div>
</div>
Any ideas how to do this?
Related
I want to upload video in my shopify store my code has for loop
<div class="product-slider-show">
<div class="owl-carousel">
{% for image in product.images %}
<div class="swiper-product-image">
<a class="cloud-zoom-gallery sub-image" id="product-image-options-" href="{{ image.src | img_url: 'master' }}" title="{{ featured_img_alt }}"
rel="useZoom: 'product-cloud-zoom', smallImage: '{{ image.src | img_url: 'master' }}'" data-pos="{{ forloop.index }}">
<img {% if settings.lazyloading_enable %} class="lazyload" data-{% endif %}src="{{ image.src | img_url: 'master' }}" title="{{ featured_img_alt }}" alt="{{ featured_img_alt }}" />
</a>
</div>
{% endfor %}
</div>
</div>
When I add video html to this code, video shows up next to each pictures.
What code should I use in this for loop, so that the video can appear alone at the end?
if anyone else is having this problem. This code was my solution
{% for image in product.images %}
{% if forloop.first == true %}
<figure>
<img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" class="product_variant_image">
</figure>
{% else %}
<figure>
<img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}">
</figure>
{% endif %}
{% endfor %}
{% for media in product.media %}
{% if media.media_type == 'video' %}
{{ media | video_tag: controls: true, preload: true, image_size: "768x" }}
{% endif %}
{% endfor %}
I'm trying to pass data on the modal with the help of jquery. I was successful passing all text related data but I'm unsure how would it work for images. As we use the {% static %} tag to show the images. It wouldn't just show on the passed modal.
Loop from where the data is being taken.
<div class="animals" id="cats" >
{% for animals in cats %}
<div class="animalInfo" id="animalInfoID" data-image = "{{ animals.image.url }}" data-name="{{ animals.name }}" data-ageyears="{{ animals.age }}"
data-agemonths="{{ animals.age_months }}" data-gender="{{ animals.gender }}" data-description="{{ animals.description }}" onclick="showContainer()">
<img class="animalPic" src="{{ animals.image.url }}" alt="">
<div class="animalDesc">
<h1>{{ animals.name }}</h1>
<p>{{ animals.description }}</p>
</div>
</div>
{% endfor %}
</div>
Modal where data is passed
<div class="mainAdoptionPopContainer" id="mainAdoptionContainerId" style="display: none;">
<img src="{% static 'adoptions/imgs/close-container.png' %}" onclick="hideContainer()" class="closeContainer" id="closeContainerID" alt="Close Pop Up">
<div class="adoptionPopImageContainer">
<img id="adoptionPopImage" src=""></img>
</div>
<div class="adoptionPopAnimalInfo">
<div class="adoptionPopAnimalInfoTitle">
<span id="adoptionPopName"><b></b></span> |
<span id="adoptionPopGender"><b></b></span> |
<span><span id="adoptionPopAge"></span> Year <span class="adoptionPopAgeMonths"></span>Months</span> |
<span id="adoptionPopBreed"><b></b></span>
</div>
<span class="adoptionDescription" id="adoptionDescriptionID"></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('.animalInfo').click(function(){
$("#adoptionPopName").html($(this).data("name"));
$("#adoptionPopImage").html($(this).data("image.url"));
$("#adoptionPopGender").html($(this).data('gender'));
$("#adoptionPopBreed").html($(this).data('breed'));
$("#adoptionPopAge").html($(this).data('ageyears'));
$("#adoptionPopAgeMonths").html($(this).data('agemonths'));
$("#adoptionPopBreed").html($(this).data('breed'));
$("#adoptionDescriptionID").html($(this).data('description'));
});
});
</script>
You need to set the src of the <img>, they have no innerHTML
$("#adoptionPopImage").attr('src', $(this).data("image"));
Also the data attribute is data-image and has no "url" in it's name
i need to add video in the product gallery .For this i am going through this tutorial https://shopify.dev/tutorials/add-theme-support-for-rich-media-3d-and-video
But when i add this code The product image is disappeared and the video is not uploaded also.
I am use this code in Product template and media below.
// Product-template
{% for media in product.media %}
{% include 'media' %}
{% endfor %}
//In midea
{% case media.media_type %}
{% when 'image' %}
<div class="thumb">
<a class="fancybox" rel="gallery1" href="{{ image.src | product_img_url: '1024x1024' }}" >
<img id="product-featured-image-{{image.id}}" class="product-featured-img" src="{{ image | img_url: 'original' }}" alt="{{ image.alt | escape }}" data-zoom-image="{{ image.src | img_url: 'original' }}"/>
</a>
</div>
{% when 'external_video' %}
<div class="product-single__media" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100}}%;" data-media-id="{{ media.id }}">
{{ media | external_video_tag }}
</div>
{% when 'video' %}
<div class="product-single__media" data-media-id="{{ media.id }}">
{{ media | video_tag: controls: true }}
</div>
{% when 'model' %}
<div class="product-single__media" style="padding-top: 100%" data-media-id="{{ media.id }}">
{{ media | model_viewer_tag }}
</div>
{% else %}
<div class="product-single__media" style="padding-top: 100%;" data-media-id="{{ media.id }}">
{{ media | media_tag }}
</div>
{% endcase %}
Product.media and product images are different objects.
{% for media in product.media %}
{% if media.media_type == 'video' %}
{{ media | video_tag: controls: true, preload: true, image_size: "1024x" }}
{% endif %}
{% endfor %}
{% for image in product.images %}
{% if forloop.first == true %}
<figure>
<img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" class="product_variant_image">
</figure>
{% else %}
<figure>
<img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}">
</figure>
{% endif %}
{% endfor %}
You need a mix of the two objects or add the photos you want to show it into media.
I have a component that is populated multiple times in the page. Inside that component I have a button that on click hides some content and shows another.
What I'm expecting: on click of each button it should execute initAnswer() function.
What I have now: Once I click on the button nothing is happening and I get no error.
P.S. I have checked other threads and tried to replicate the answers but with no success. Thank you!!! 🙏
let selectedShadeButton = document.querySelectorAll('.shade-btn');
let shadeDataSet = selectedShadeButton.dataset.sheertexShade;
for(let i = 0; i < selectedShadeButton.length; i++) {
selectedShadeButton[i].addEventListener('click', (event) => {
if(event = event.target){
initAnswer();
}
})
}
function initAnswer() {
document.querySelector('.nudes-wrapper').style.display = 'none';
document.querySelector('.nudes-thanks').style.display = 'block';
document.querySelector('.shady-answer').innerHTML = shadeDataSet;
}
<div id="nudesModal" class="modalnudes">
{% comment %} Modal content {% endcomment %}
<div class="modal-content">
<span class="close-nudespop">×</span>
<div class="inner-content">
<p class="sm:tw-text-4xl tw-leading-tight sm:tw-ml-auto pop-title tw-text-2xl">Which group should we start from?</p>
<p>The subtitle of the modal</p>
</div>
<div class="nudes-wrapper tw-flex">
<div class="shade-container">
{% include 'shade-picker.row', shade_name: 'S1' %}
{% include 'shade-picker.row', shade_name: 'S2' %}
{% include 'shade-picker.row', shade_name: 'S3' %}
{% include 'shade-picker.row', shade_name: 'S4' %}
{% include 'shade-picker.row', shade_name: 'S5' %}
{% include 'shade-picker.row', shade_name: 'S6' %}
</div>
<div class="magnified-img">
</div>
</div>
<div class="nudes-thanks tw-hidden">
{% include 'nudes-thank-you' %}
</div>
</div>
</div>
/* inside the shade-picker.row */
<div class="shade-{{shade_name}} shade-of-nude">
<label>{{ shade_name }}</label>
<div class="shade-img tw-flex">
<img class="lazyload" data-src="{{ shade_name | append: '-face1.jpg' | asset_url }}" data-sizes="auto" alt="Picture of a face that matches shade {{shade_name | escape}}">
<img class="lazyload" data-src="{{ shade_name | append: '-face2.jpg' | asset_url }}" data-sizes="auto" alt="Picture of a face that matches shade {{shade_name | escape}}">
<img class="lazyload" data-src="{{ shade_name | append: '-face3.jpg' | asset_url }}" data-sizes="auto" alt="Picture of a face that matches shade {{shade_name | escape}}">
<img class="lazyload" data-src="{{ shade_name | append: '-face4.jpg' | asset_url }}" data-sizes="auto" alt="Picture of a face that matches shade {{shade_name | escape}}">
<noscript>
<img class="lazyloaded" data-src="{{ shade_name | append: '-face1.jpg' | asset_url }}" alt="Picture of a face that matches shade {{shade_name | escape}}">
<img class="lazyloaded" data-src="{{ shade_name | append: '-face2.jpg' | asset_url }}" alt="Picture of a face that matches shade {{shade_name | escape}}">
<img class="lazyloaded" data-src="{{ shade_name | append: '-face3.jpg' | asset_url }}" alt="Picture of a face that matches shade {{shade_name | escape}}">
<img class="lazyloaded" data-src="{{ shade_name | append: '-face4.jpg' | asset_url }}" alt="Picture of a face that matches shade {{shade_name | escape}}">
</noscript>
</div>
<div>
<button class="shade-btn" data-sheertex-shade='{{shade_name}}'>Pick {{ shade_name }}!</button>
</div>
</div>
The problem is by doing this
let selectedShadeButton = document.querySelectorAll('.shade-btn');
You will receive an array of nodes in the selectedShadeButton and on that array of nodes you can not access dataset. So dataset is undefined. To solve the problem you can debug the problem by doing some debugging.
console.log(selectedShadeButton)
Will help you to understand what is happening
I would like to have bootstrap carousel of mezzanine galleries. Basically; I am pulling in all the images and I want to have a single row of three images carouse ling. Here is a working snippet of code that I really hate; I would really like to make it work for an unlimited number of images.
{% if page.docpage.gallery %}
<script src="{% static "mezzanine/js/magnific-popup.js" %}"></script>
<link rel="stylesheet" href="{% static "mezzanine/css/magnific-popup.css" %}">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
{% with page.docpage.gallery.gallery.images.all as images %}
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
{% for image in images %}
{% cycle '<div class="item active">' '' '' '<div class="item">' '' '' '<div class="item">' '' ''%}
{% cycle '<div class="gallery row"><div class="col-xs-12 col-sm-12">' '' ''%}
<a class="thumbnail" rel="#image-{{ image.id }}" title="{{ image.description }}" href="{{ image.file.url }}">
<img class="img-responsive" src="{{ MEDIA_URL }}{% thumbnail image.file 200 200 %}"></a>
{% cycle '' '' '</div></div></div>'%}
{% endfor %}
</div>
</div>
{% endwith %}
{% endif %}
I am basically cycling through images and adding other nested tags as required. I've also played around with tracking the loop through forloop.counter|divisibleby:3, but I found that the closing divs were not being applies correctly.
Does anyone have any ideas on how to make this work in jinja/django/mezzanine?
Otherwise I can whip up some javascript to get the job done.
Thanks
Trying to perform this logic in the template isn't ideal, as you have discovered. I would suggest you do it in the view function. Something along these lines:
# Handy function to split a list into equal sized groups,
# See http://stackoverflow.com/a/434328/3955830
def chunker(seq, size):
return (seq[pos:pos + size] for pos in xrange(0, len(seq), size))
# Split images into groups of three
image_groups = chunker(images, 3)
# Pass image_groups to your template context.
# If in a class based view then you can do this in the
# get_context_data() method.
Then in the template, things are much simpler:
{% for group in image_groups %}
<div class="item {% if forloop.first %}active{% endif %}">
<div class="gallery row">
<div class="col-xs-12 col-sm-12">
{% for image in group %}
<a class="thumbnail" rel="#image-{{ image.id }}" title="{{ image.description }}" href="{{ image.file.url }}">
<img class="img-responsive" src="{{ MEDIA_URL }}{% thumbnail image.file 200 200 %}"></a>
{% endfor %}
</div>
</div>
</div>
{% endfor %}