How to Reference Image Path from SQL Database in Asp.Net for jQuery SlideShow

Question

I have a website which contains an image bar of three images the in header section like so:

Image Bar

Currently, I've written the following jQuery to fadeIn & fadeOut at least the first image on a 3 second timer:

<script type="text/javascript">
    $(document).ready(function (){
        setTimeout(function (){
            $('#Image1').fadeOut('slow');                                     
        }, 3000);            

    });

    var fadeBack = function () {
        setTimeout(function () {
            $('#Image1').fadeIn('slow');
        }, 6000);
    };

    fadeBack();        
</script>

What I'm having difficulty figuring out is how I can actually make a slideshow out the rest of the images in the Images folder. Thus I built in a DB with the structure as such:

Photos Table Structure

And here's the data view of the paths in the table:

Data View of Image Paths

Lastly, here's my Web.config file's <connectionStrings> info:

<connectionStrings>
<add name="DetailPhotosEntities" connectionString="metadata=res://*/App_Code.DetailPhotos.csdl|res://*/App_Code.DetailPhotos.ssdl|res://*/App_Code.DetailPhotos.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=.\SQLEXPRESS;initial catalog=DetailPhotos;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />

Is what I'm trying to do possible? I was told I would have change my <connnectionStrings> following another site's info. How do I call the image URLs into the header image placeholders from my DB, and set the behavior up as a slideshow with fadeIn & fadeOut on the images? Would I be, in effect, fading the image paths from the DetailPhotos DB? This is my most ambitious work yet, and I'm lost. Thanks!

Christopher Thomas · Accepted Answer · 2014-08-27 00:06:55Z

1

Do you really need to store your image paths in a database? The only reason I would consider doing that is if you intend to introduce some way of dynamically updating the images at some point.

If you are happy to just update the images in the slideshow by updating your script manually, i'd consider adapting the following, taken from this page. (Untested)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Simple Slide Show with jQuery</title>
    <script type='text/javascript' src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'></script>
    <script type="text/javascript">
        var imgs = [
        'images/emo.jpg',
        'images/icon068.gif',
        'images/icon260.jpg'];
        var cnt = imgs.length;

        $(function() {
            setInterval(Slider, 3000);
        });

        function Slider() {
        $('#imageSlide').fadeOut("slow", function() {
           $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
        });
        }
    </script>
  </head>
  <body>
    <img id="imageSlide" alt="" src="" />
  </body>
</html>

this bit allows you to add as many images as you want:

var imgs = [
'images/emo.jpg',
'images/icon068.gif',
'images/icon260.jpg'];

answered Aug 27, 2014 at 0:06

Christopher Thomas

3722 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DesignerMind Over a year ago

Thank you, but does this implement for just one instance of an Image placeholder, or does it span across all 3 of the image placeholders I have set up... i.e., #Image1, #Image2, and #Image3?

DesignerMind Over a year ago

I see that it works for one... just got back around to working on this project. I'll just write up another 2 functions for the other boxes, and tuck the code away in a file somewhere in the solution to save space in the MasterPage. Thanks!

Collectives™ on Stack Overflow

How to Reference Image Path from SQL Database in Asp.Net for jQuery SlideShow

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related