I have js slideshow that shows images from a mysql database. The problem Im having is its only showing the first image in the table for each foreign key when there are multiple images with the same foreign key.
The property table containing all the information, PropertyID is the primary key. The propertyimage table contains the image name and path as well as PropertyID as the foreign key. https://imgur.com/gallery/Ipdfw
In this screenshot you can see the slideshow but just loops through only showing the first image. https://imgur.com/gallery/S1H2g
This is the slideshow im using I like Robots jquery slideshow.
c#
protected void GetImages2()
{
foreach (DataListItem item in DataList1.Items)
{
Repeater Repeater2 = ((Repeater)(item.FindControl("Repeater2")));
Label Label8 = ((Label)(item.FindControl("Label8")));
string constr = ConfigurationManager.ConnectionStrings["realestatedbAddConString"].ConnectionString;
using (MySqlConnection con = new MySqlConnection(constr))
{
using (MySqlCommand cmd = new MySqlCommand("SELECT * FROM propertyimage WHERE PropertyID = '" + Label8.Text + "'", con))
{
using (MySqlDataAdapter sda = new MySqlDataAdapter(cmd))
{
con.Open();
DataTable dt = new DataTable();
sda.Fill(dt);
Repeater2.DataSource = dt;
try {
Repeater2.DataBind();
}
catch (Exception e)
{
Console.WriteLine("An error occurred: '{0}'", e);
}
con.Close();
}
}
}
}
}
the repeater with the slideshow is inside a datalist.
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<br />
<h2 class="text-center">PROPERTY ID</h2>
<asp:Label Text='<%# Bind("PropertyID") %>' runat="server" ID="Label8" Style="margin-left: 50%; font-size: x-large; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: silver;" class="text-center" />
<br />
<br />
</div>
</div>
</div>
Any help to fixing this would be greatly appreciated, Thank you.
Edit* slideshow source from inspect element in browser
<div class="slideshow" data-transition="crossfade" data-loop="true" data-skip="false" data-pagination="true">
<div style="position:relative;overflow:hidden;">
<ul class="carousel">
<li class="slide" style="left: 0px; top: 0px; display: none;">
<img src="ImagesUploaded/fire%20chape.jpg" style="height:526px;width:950px;">
</li>
<li class="slide" style="left: 0px; top: 0px; display: none;">
<img src="ImagesUploaded/ghost%20recon.png" style="height:526px;width:950px;">
</li>
<li class="slide" style="left: 0px; top: 0px; display: none;">
<img src="ImagesUploaded/Ghost-Rider-Wallpaper-photo.jpeg" style="height:526px;width:950px;">
</li>
<li class="slide" style="">
<img src="ImagesUploaded/goat-skull.jpg" style="height:526px;width:950px;">
</li>
</ul>
</div>
<ul class="slides-pagination"><li class=""><a href="#" data-slides="0">1</a></li><li class=""><a href="#" data-slides="1">2</a></li><li class=""><a href="#" data-slides="2">3</a></li><li class="selected"><a href="#" data-slides="3">4</a></li></ul></div>
slideshow js:
! function (a, b) {
"use strict";
function c(b, c) {
return this.target = b, this.$target = a(b), this.opts = a.extend({}, d, c, this.$target.data()), this.$carousel = this.$target.children(this.opts.carousel), this.$items = this.$carousel.children(this.opts.items), this.count = this.$items.length, this.scrollable = !0, this.count > 1 && this._init(), this
}
var d = {
carousel: ".carousel",
items: ".slide",
slideWidth: !1,
jumpQueue: !0,
offset: 1,
skip: !0,
pagination: !0,
auto: 6e3,
autostop: !0,
hoverPause: !1,
loop: !1,
nextText: "Next",
previousText: "Previous",
transition: "scroll",
speed: 600,
easing: "swing",
visible: 1,
onupdate: null,
oncomplete: null
};
c.prototype._init = function () {
var b = this;
if (this.$wrapper = this.$carousel.wrap('<div style="position:relative;overflow:hidden;">').parent(), this.opts.pagination) {
this.$pagination = a('<ul class="slides-pagination">');
for (var c = 0, d = this.count; d > c; c++) this.$pagination.append('<li><a href="#" data-slides="' + c + '">' + (c + 1) + "</a></li>");
this.$target.append(this.$pagination)
}
this.opts.skip && (this.$prev = a('<a href="#" class="slides-prev" data-slides="previous">' + this.opts.previousText + "</a>"), this.$next = a('<a href="#" class="slides-next" data-slides="next">' + this.opts.nextText + "</a>"), this.$target.append(this.$next, this.$prev)), (this.opts.pagination || this.opts.skip) && this.$target.on("click.slides", "[data-slides]", function (c) {
var d = a(this);
c.preventDefault(), d.hasClass("disabled") || b.to(d.data("slides"), !0)
}), this.redraw(), this.opts.auto && (this.opts.hoverPause && this.$target.hover(function () {
b.stopped || b.pause()
}, function () {
b.paused && b.play()
}), this.play())
}, c.prototype._oncomplete = function () {
var a = this.current;
this.current = this.future, this.opts.pagination && this.$pagination.children().removeClass("selected").slice(this.current, this.current + this.opts.visible).addClass("selected"), this.opts.skip && (this.hasNext() || this.opts.loop ? this.$next.removeClass("disabled") : this.$next.addClass("disabled"), this.hasPrevious() || this.opts.loop ? this.$prev.removeClass("disabled") : this.$prev.addClass("disabled")), this.opts.oncomplete && this._handleCallback(this.opts.oncomplete, [this.current, a])
}, c.prototype._handleCallback = function (a, b) {
a = "string" == typeof a ? window[a] : a, a.call && a.apply(this, b)
}, c.prototype.hasNext = function () {
return this.scrollable && this.current < this.count - 1
}, c.prototype.hasPrevious = function () {
return this.current > 0
}, c.prototype.next = function () {
this.to(this.current + 1)
}, c.prototype.previous = function () {
this.to(this.current - 1)
}, c.prototype.to = function (a, b) {
if (this.opts.jumpQueue) this.$items.stop(!0, !0);
else if (this.$items.queue("fx").length) return;
"next" === a ? a = this.current + 1 : "previous" === a && (a = this.current - 1), "number" != typeof a && (a = parseInt(a, 10)), a >= this.count ? a = this.opts.loop ? 0 : this.count - 1 : 0 > a && (a = this.opts.loop ? this.count - 1 : 0), b && !this.stopped && (this.opts.autostop ? this.stop() : this.paused || this.play()), a !== this.current && (this.future = a, this.transition.execute.call(this), this.opts.onupdate && this._handleCallback(this.opts.onupdate, [a]))
}, c.prototype.redraw = function (a) {
this.transition && this.transition.teardown.call(this), a && (this.opts.transition = a), this.current = b, this.transition = this.transitions[this.opts.transition].call(this), this.to(this.opts.offset - 1)
}, c.prototype.play = function () {
var a = this;
clearInterval(this.timeout), this.paused = this.stopped = !1, this.timeout = setInterval(function () {
a.to("next")
}, this.opts.auto)
}, c.prototype.pause = function () {
this.paused = !0, clearInterval(this.timeout)
}, c.prototype.stop = function () {
this.stopped = !0, this.paused = !1, clearInterval(this.timeout)
}, c.prototype.transitions = {
crossfade: function () {
var a = this;
return this.$items.filter(function (b) {
return b !== a.opts.offset - 1
}).css("display", "none"), this.execute = function () {
var b = this.$items.eq(this.future),
c = this.$items.eq(this.current).css({
position: "absolute",
left: 0,
top: 0
});
b.fadeIn(this.opts.speed, this.opts.easing, function () {
a._oncomplete.call(a)
}), c.fadeOut(this.opts.speed, this.opts.easing, function () {
c.css("position", "")
})
}, this.teardown = function () {
this.$items.stop(!0, !0).removeAttr("style")
}, this
},
scroll: function () {
var a = this,
b = 0;
this.$items.css({
"float": "left",
width: this.opts.slideWidth
});
for (var c = 0; c < this.count; c++) b += this.$items.eq(c).outerWidth(!0);
return this.$carousel.css({
minWidth: b
}), this.execute = function () {
var b = this.$items.eq(this.future).position().left + this.$wrapper.scrollLeft(),
c = this.$carousel.width() - this.$wrapper.width(),
d = b >= c;
(!d || this.scrollable) && this.$wrapper.animate({
scrollLeft: d ? c : b
}, this.opts.speed, this.opts.easing, function () {
a._oncomplete.call(a)
}), this.scrollable = !d
}, this.teardown = function () {
this.scrollable = !0, this.$items.removeAttr("style"), this.$carousel.stop(!0, !0).removeAttr("style")
}, this
}
}, a.fn.slides = function (b) {
return this.each(function () {
a.data(this, "slides") || a.data(this, "slides", new c(this, b))
})
}, "function" == typeof define && define.amd ? define(function () {
return c
}) : "undefined" != typeof module && module.exports && (module.exports = c)
}(jQuery);
<script src="2/dist/slideshow.js"></script>
<script>
$(function () {
// Create slideshow instances
var $s = $('.slideshow').slides();
// Access an instance API
var api = $s.eq(0).data('slides');
// Transition select
$('select[name=transition]').on('change', function () {
api.redraw(this.value);
});
});
</script>
