Image Video slideshow from database using jQuery Boslider plugin in ASP.Net

Last Reply 6 days ago By dharmendr

Posted 6 days ago

Slider multiple sound playing simultaneously

Create video slider with images from database using jQuery in ASP.Net

mp3 play by slide. after change the slide old mp3 and new mp3 play same time. one more condition required mp3 slide change old mp3 should stop and new mp3 paly new slide

Posted 6 days ago Modified on 4 days ago

Hi ashish007,

This plugin doesn't support this. You can check with below plugin.

https://www.jqueryscript.net/slideshow/image-video-slideshow-bo.html

Check this example.

HTML

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.min.css" />
<link rel="stylesheet" type="text/css" href="http://www.jqueryscript.net/css/jquerysctipttop.css" />
<script src="Slideshow.js" type="text/javascript"></script>
<div id="holder">
    <div class="container">
        <ul class="bo-slider">
            <asp:Repeater ID="rp1" runat="server" OnItemDataBound="OnItemDataBound">
                <ItemTemplate>
                    <li id="liImage" runat="server" data-url='<%#Eval("path") %>' data-type="image"></li>
                    <li id="liVideo" runat="server" data-url='<%#Eval("path") %>' data-type="video"></li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('.bo-slider').boSlider({
            slideShow: true,
            interval: 2000,
            animation: "fade"
        });
    });
</script>

Namepsaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.IO;
using System.Web.UI.HtmlControls;

VB.Net

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.IO
Imports System.Web.UI.HtmlControls

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        rp1.DataSource = GetData("SELECT TOP 3 Id,ImageName,path FROM tblFilePath ORDER BY Id DESC");
        rp1.DataBind();
    }
}

protected void OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        string file = ((DataRowView)e.Item.DataItem).Row["Path"].ToString();
        string extension = Path.GetExtension(file);

        HtmlGenericControl image = e.Item.FindControl("liImage") as HtmlGenericControl;
        image.Visible = extension == ".jpg" ? true : false;

        HtmlGenericControl video = e.Item.FindControl("liVideo") as HtmlGenericControl;
        video.Visible = extension == ".mp4" ? true : false;
    }
}

private DataTable GetData(string query)
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        SqlCommand cmd = new SqlCommand(query);
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);
                return dt;
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        rp1.DataSource = GetData("SELECT TOP 3 Id,ImageName,path FROM tblFilePath ORDER BY Id DESC")
        rp1.DataBind()
    End If
End Sub

Protected Sub OnItemDataBound(ByVal sender As Object, ByVal e As RepeaterItemEventArgs)
    If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
        Dim file As String = CType(e.Item.DataItem, DataRowView).Row("Path").ToString()
        Dim extension As String = Path.GetExtension(file)
        Dim image As HtmlGenericControl = TryCast(e.Item.FindControl("liVideo"), HtmlGenericControl)
        image.Visible = If(extension = ".jpg", True, False)
        Dim video As HtmlGenericControl = TryCast(e.Item.FindControl("liVideo"), HtmlGenericControl)
        video.Visible = If(extension = ".mp4", True, False)
    End If
End Sub

Private Function GetData(ByVal query As String) As DataTable
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conString)
        Dim cmd As SqlCommand = New SqlCommand(query)
        Using sda As SqlDataAdapter = New SqlDataAdapter()
            cmd.Connection = con
            sda.SelectCommand = cmd
            Using dt As DataTable = New DataTable()
                sda.Fill(dt)
                Return dt
            End Using
        End Using
    End Using
End Function