How to make automatic browsing to images from database ? RRS feed

  • Question

  • I work in MVC 5 c# in visual studio 2015 web applications

    I have table pictures in SQL server 2012 have two fields



    ID have number of image inserted like 1,2,3,4,5

    Image field store picture added

    what i need actually browsing images found in table pictures in database from last image inserted to first in page

    and browsing between every image and another 1 second automatically without using button or scroll

    suppose i have 4 images in database in table pictures

    after page open picture 4 display after 1 second picture 3 display after 1 second picture 2 display after 1 second picture 1 display .

    How i do that please ? 
    Friday, April 28, 2017 9:49 AM

All replies

  • Hi eng-ahmed-salah,

    According to your description, it seems that you want an Image Slider function, I would suggest that you could use JQuery to achieve it.  the following code for your reference.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="simple jquery image slideshow tutorial.aspx.cs" Inherits="ASP_Tutorial.simple_jquery_image_slideshow_tutorial" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head runat="server"> <title></title> <style type="text/css"> #slideshow #slideshowWindow { width:512px; height:384px; margin:0; padding:0; ; overflow:hidden; } #slideshow #slideshowWindow .slide { margin:0; padding:0; width:512px; height:384px; float:left; ; } </style> <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script> <script type="text/javascript"> $(document).ready(function () { var currentPosition = 0; var slideWidth = 512; var slides = $('.slide'); var numberOfSlides = slides.length; var slideShowInterval; var speed = 3000; slideShowInterval = setInterval(changePosition, speed); slides.wrapAll('<div id="slidesHolder"></div>') slides.css({ 'float': 'left' }); $('#slidesHolder').css('width', slideWidth * numberOfSlides); function changePosition() { if (currentPosition == numberOfSlides - 1) { currentPosition = 0; } else { currentPosition++; } moveSlide(); } function moveSlide() { $('#slidesHolder') .animate({ 'marginLeft': slideWidth * (-currentPosition) }); } }); </script> </head> <body> <form id="form1" runat="server"> <div id="slideshow"> <div id="slideshowWindow"> <!-- please fill the image via control --> <!--<div class="slide"> <img src="images/slide2.jpg" alt="image is here"/> </div><!--/slide--> <div class="slide"> <img src="images/slide1.jpg" alt="image is here"/> </div><!--/slide--> <div class="slide"> <img src="images/slide3.jpg" alt="image is here"/> </div><!--/slide-->

    --> </div><!--/slideshowWindow--> </div><!--/slideshow--> </form> </body> </html>

    In addition, Since your issue is more related to mvc, I would suggest that you could post your issue on mvc forum for suitable support.

    Best regards,

    Cole Wu

    MSDN Community Support<br/> Please remember to click &quot;Mark as Answer&quot; the responses that resolved your issue, and to click &quot;Unmark as Answer&quot; if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact <a href=""></a>.

    Tuesday, May 2, 2017 6:46 AM