Hello I am trying to put a carousel in my modal. everything was working fine until I put it. can someone please tell me what's wrong?
gallery.html
{% for photo in gallery %}
×
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<img src="{{photo.imageURL}}" alt="First slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
please change below photo url path
<img src="{{photo.image.url}}" alt="First slide">
Related
I'm trying to implement a "Count No. of Entries" and "Filtering" functionality to my List.js list, like in this example: Codepen. But in this implementation the list item data is part of the JS file itself and not of the HTML (what I would like to have). So I'm having problems "translating" this JS code for my list. What would I need to write in the JS file? Cf. Codepen Could you please help? 🙏
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Total Number:<span class="count"></span></p>
</div>
</div>
</div>
<div id="users">
<div class="container">
<div class="row">
<div class="col-md-12">
<input class="search form-control" placeholder="Search" />
<button class="sort btn btn-primary" data-sort="name">
Sort by name
</button>
<button class="sort btn btn-primary" data-sort="title">
Sort by title
</button>
<div class="tags">
<div>Filter by:</div>
<div class="tag filter" data-filter="Baseball">Baseball </div>
<div class="tag filter" data-filter="Kitties">Kitties </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group list">
<a href="#" class="list-group-item">
<div class="col-md-10">
<h4 class="list-group-item-heading name">Alex</h4>
<p class="list-group-item-text title">Leader</p>
</div>
<div class="col-md-2">
<div class="expertise">
<span class="expertise-label">Tags </span>
<p class="labels">
<span class="label label-default expertise">Baseball</span>
</p>
</div>
</div>
<div class="clearfix"></div>
<a href="#" class="list-group-item">
<div class="col-md-10">
<h4 class="list-group-item-heading name">Dennis</h4>
<p class="list-group-item-text title">Super Leader</p>
</div>
<div class="col-md-2">
<div class="expertise">
<span class="expertise-label">Tags </span>
<p class="labels">
<span class="label label-default expertise">Kitties</span>
</p>
</div>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
</div>
</div>
</div>
"127.0.0.1:8000/adminpanel/edit_gallary/29"
So this is the main problem when I first edit it works properly. But when I want to edit the second time URL automatically changes & it changes this way.
"127.0.0.1:8000/adminpanel/edit_gallary/edit_gallary/29"
This is my views.py file:
def edit_gallary(request,gallaryid):
table = gallary.objects.get(id=gallaryid)
gallary_form = gallaryform(instance=table)
if request.method=='POST':
form = gallaryform(data=request.POST, files=request.FILES, instance=table)
if form.is_valid():
form.save()
table=gallary.objects.all()
return render(request,"gallary1.html",{'table':table})
context = {'gallary_form':gallary_form}
return render(request,'edit_gallary.html',context)
This is my URLS.py file:
path('edit_gallary/<int:gallaryid>',views.edit_gallary,name="edit gallery"),
This is my edit_gallary.html file:
{% extends 'index.html' %}
{% block content %}
<body>
<div class="main-wrapper">
<div class="app" id="app">
<header class="header">
<div class="header-block header-block-collapse d-lg-none d-xl-none">
<button class="collapse-btn" id="sidebar-collapse-btn">
<i class="fa fa-bars"></i>
</button>
</div>
<div class="header-block header-block-nav">
<ul class="nav-profile">
<li class="profile dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
aria-haspopup="true" aria-expanded="false">
<div class="img"
style="background-image: url('https://avatars3.githubusercontent.com/u/3959008?v=3&s=40')">
</div>
<span class="name">Admin</span>
</a>
<div class="dropdown-menu profile-dropdown-menu" aria-labelledby="dropdownMenu1">
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="fa fa-power-off icon"></i> Logout </a>
</div>
</li>
</ul>
</div>
</header>
<aside class="sidebar">
<div class="sidebar-container">
<div class="sidebar-header">
<div class="brand">
<div class="logo">
<span class="l l1"></span>
<span class="l l2"></span>
<span class="l l3"></span>
<span class="l l4"></span>
<span class="l l5"></span>
</div> Compare school
</div>
</div>
<nav class="menu">
<ul class="sidebar-menu metismenu" id="sidebar-menu">
<li>
<a href="insert_school">
<i class="fa fa-home"></i>Back</a>
</li>
</ul>
</nav>
</div>
</aside>
<div class="sidebar-overlay" id="sidebar-overlay"></div>
<div class="sidebar-mobile-menu-handle" id="sidebar-mobile-menu-handle"></div>
<div class="mobile-menu-handle"></div>
<article class="content responsive-tables-page">
<div class="title-block">
<h1 class="title">Gallary</h1>
<p class="title-description"></p>
</div>
<section class="section">
<div class="row">
<div class="table-responsive">
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<table class="table table-striped table-bordered">
{{ gallary_form }}
<tr>
<td class="text-right mb-3">
<input type="submit" value="register" class="btn btn-primary" >
</td>
</tr>
</table>
</form>
</div>
</div>
</section>
</article>
</div>
</div>
<script src="js/vendor.js"></script>
<script src="js/app.js"></script>
{% endblock %}
</body>
It seems you need to change 'edit_gallary/<int:gallaryid>' to '<int:gallaryid>/edit_gallary/' in urls.py or just try adding a slash to the route end in your path
I need to set Auto Play a Mp3 Audio on the HTML website. I am not sure which code or class should I add. Please help. Here is my codings.
<div id="jp_container_2" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-playlist">
<div class="jp-playlist">
<ul>
<li> </li>
</ul>
</div>
<div class="jp-gui jp-interface">
<span class="jp-stop wm-bgcolor"><i class="flaticon-power"></i></span>
<div id="current-track1" class="song-title">Song Name is here</div>
<div class="jp-controls">
<span class="jp-shuffle"><i class="flaticon-arrows-2"></i></span>
<span class="wm-bgcolor-one jp-previous"><i class="flaticon-arrows-1"></i></span>
<span class="jp-play"><i class="fa fa-pause"></i> <i class="fa fa-play"></i></span>
<span class="wm-bgcolor-one jp-next"><i class="flaticon-arrows-1"></i></span>
<span class="jp-repeat"><i class="flaticon-arrows-3"></i></span>
</div>
<div class="wm-player-wrap">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-controls">
<span class="jp-mute"><i class="fa fa-volume-up"></i> <i class="fa fa-volume-off"></i></span>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
</div>
<i class="flaticon-music-1"></i>
</div>
</div>
</div>
Just use an audio tag:
<audio src="track.mp3" autoplay></audio>
Note that autoplay is subject to the policies of the browser. Mobile browsers, for example, don't typically allow autoplay.
I am pulling the products from database and trying to display them in multiple frames/items of carousel on a screen rather than a single item using for loop.
This is what my carousel looks like at present, as you will notice only one item is displayed, but i want it to display 4 items at one slide and next four on clicking arrow button and so on.
click here to see my carousel image.
my Django code looks like this--
<div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
{% for prod in pro %}
<div class="item{% if forloop.first %} active{% endif %}">
<div class="col-sm-3">
<div class="product-image-wrapper1">
<div class="single-products">
<div class="productinfo text-center">
<!--sample image, same for all--><img src="{% static 'header/images/home/2508__14291.1437672247.200.200.jpg' %}" alt="" />
<h2>{{prod.productname}}</h2>
<p>{{prod.producttype}}</p>
<i class="fa fa-shopping-cart"></i>Add to cart
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
Try to do something like this:
<div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
{% for prod in pro %}
<div class="col-sm-3">
<div class="product-image-wrapper1">
<div class="single-products">
<div class="productinfo text-center">
<!--sample image, same for all--><img src="{% static 'header/images/home/2508__14291.1437672247.200.200.jpg' %}" alt="" />
<h2>{{prod.productname}}</h2>
<p>{{prod.producttype}}</p>
<i class="fa fa-shopping-cart"></i>Add to cart
</div>
</div>
</div>
</div>
{% if forloop.counter|divisibleby:4 and not forloop.last %}
</div>
<div class="item">
{% endif %}
{% endfor %}
</div>
</div>
<a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
In our project, we use the bootstrap widget module widely.
<div class="widget">
<header>
<div class="pull-left">
<h2><i class="fa fa-shopping-cart"></i>product-list</h2>
</div>
<div class="pull-right">
<a class="btn btn-default btn-sm toggle-widget" href="#">
<i class="fa fa-minus"></i>
</a>
</div>
</header>
<div class="inner-padding">
...............
</div>
</div>
<div class="widget">
<header>
<div class="pull-left">
<h2><i class="fa fa-user"></i>
user info
</h2>
</div>
<div class="pull-right">
<a class="btn btn-default btn-sm toggle-widget" href="#">
<i class="fa fa-minus"></i>
</a>
</div>
</header>
<div class="inner-padding">
.............
</div>
</div>
We repeat these code again and again. My problem is that how can I write a template and make these code reusable.
If I make a sub template like this:
<div class="widget">
<header>
<div class="pull-left">
<h2><i class="fa {{ icon }}"></i>
{{ title }}
</h2>
</div>
<div class="pull-right">
<a class="btn btn-default btn-sm toggle-widget" href="#">
<i class="fa fa-minus"></i>
</a>
</div>
</header>
<div class="inner-padding">
{% block content %}
{% endblock %}
</div>
</div>
I can use {% include %} to include the template:
{% include "sub-template.html" with icon="..." title="..." %}
But how can I render 'block content'?
In addition, we may include this sub-template.html several times in one template:
{% include "sub-template.html" with icon="1" title="user-info" %}
{% include "sub-template.html" with icon="2" title="product-list" %}
I think this is a very common scenario, but I can not find a solution using Django template. Is there anyone can give me some suggestion?
In this case, I could consider a template of header only:
# header-template.html
<header>
<div class="pull-left">
<h2><i class="fa {{ icon }}"></i>
{{ title }}
</h2>
</div>
<div class="pull-right">
<a class="btn btn-default btn-sm toggle-widget" href="#">
<i class="fa fa-minus"></i>
</a>
</div>
</header>
and, then use it in widgets:
<div class="widget">
{% include "header-template.html" with icon="1" title="user-info" %}
<div class="inner-padding">
.............
</div>
</div>
<div class="widget">
{% include "header-template.html" with icon="2" title="product-list" %}
<div class="inner-padding">
.............
</div>
</div>
If you think that for some of the widgets the content is also common, then you can create a template of that too, and use it in the widget.