Создайте несколько уникальных каруселей совы для каждого объекта изображения в модели
У меня есть модель данных изображений для веб-приложения художественной галереи, которое я делаю. На главной странице отображается сетка изображений, каждое из которых имеет свои специфические данные, такие как название изображения, описание, цена и т.д.
Когда вы нажимаете на изображение, появляется модальное окно, в котором я хочу создать уникальную карусель Owl Carousel, которая будет содержать больше изображений (спереди, сзади, слева, справа, под разными углами и т.д.) той картины, на которую был сделан клик. В настоящее время, независимо от того, на какую картину я нажимаю, в модале создается только одна карусель, содержащая все изображения, которые я добавил на странице администратора, а это не то, что я хочу. Я хочу иметь отдельную специфическую карусель, созданную для каждого объекта картины, которая захватывает только изображения этого объекта.
Есть идеи?
Спасибо за помощь.
Вот мой models.py:
class Portrait(models.Model):
name = models.CharField(max_length= 100)
painting = models.ImageField(upload_to= 'paintings')
long_description = models.TextField()
price = models.IntegerField()
short_description = models.TextField()
# these are the images that will be displayed in the carousel
painting_left = models.ImageField(upload_to= 'carousel_paintings')
painting_right = models.ImageField(upload_to= 'carousel_paintings')
painting_top = models.ImageField(upload_to= 'carousel_paintings')
painting_bottom = models.ImageField(upload_to= 'carousel_paintings')
painting_back = models.ImageField(upload_to= 'carousel_paintings')
# name the objects in admin page
def __str__(self):
return self.name
Вот мой views.py:
from multiprocessing import context
from django.shortcuts import render
from django.http import JsonResponse
# import models from models.py
from .models import *
from django.forms.models import model_to_dict
# Create your views here.
# Art Gallery App views.py
def index(request):
# dynamically access and fetch Portrait data from db or admin actions
paintingObjects = Portrait.objects.all()
context = {
'paintingObjects': paintingObjects
}
# display index.html file in templates folder with data
return render(request, "index.html", context)
Вот мой index.html, в котором отображается сетка изображений, модальная и карусель:
<!-- CAROUSEL START -->
<div class="owl-carousel owl-theme owl-loaded" id="myCarousel">
{% for gallery in paintingObjects %}
<!-- front image -->
<div class="slide slide-1">
<div class="slide-content">
<img src="{{ gallery.painting.url}}" />
</div>
</div>
<!-- left image -->
<div class="slide slide-2">
<div class="slide-content">
<img src="{{ gallery.painting_left.url}}" />
</div>
</div>
<!-- right image -->
<div class="slide slide-3">
<div class="slide-content">
<img src="{{ gallery.painting_right.url}}" />
</div>
</div>
<!-- etc.... -->
{% endfor %}
</div>
<!-- END CAROUSEL -->
Jquery в файле index.html для создания модала и Owl Carousel:
<script type="text/javascript">
// start modal popup
$('.gallery-link').click(function(){
// id of modal element
// painting name
$('#painting-name').html($(this).data('name'));
// painting description
$('#modal-long-description').html($(this).data('description'));
// painting s
var src = $(this).attr("src");
$("#modal-img").prop("src",src);
//painting price
$('#modal-price').html($(this).data('price'));
// show the modal
$('#painting-modal').modal('show');
// start carousel
console.clear();
console.log('carousel started');
$(".owl-carousel").owlCarousel({
items:1,
loop:true,
nav:true,
dots: false,
autoplay: false,
autoplayTimeout: 5000,
smartSpeed: 500,
autoplayHoverPause: false,
margin: 20,
touchDrag: true,
mouseDrag: false,
navText : ["<i class='fa fa-chevron-left'></i>",
"<i class='fa fa-chevron-right'></i>"]
});
});