Jquery Image slider in c# asp.net web page
Jquery Image Slider in c# asp.net web page: download source code demo: We can easily use Jquery Image slider in asp.net pa...
Jquery Image Slider in c# asp.net web page:
download source codedemo:
<!-- First, add jQuery (and jQuery UI if using custom animation -->
<script src="../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<!-- Second, add the Slider Control and Animation plugins -->
<script src="../Scripts/jquery.SliderControl.js" type="text/javascript"></script>
<script src="../Scripts/jquery.SliderAnimation.js" type="text/javascript"></script>
<!-- Third, add the GalleryView Javascript and CSS files -->
<link href="../Styles/jquery.ImageSliderGalleryview.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery.ImageSliderGalaryView.js" type="text/javascript"></script>
Now take a unorderedlist in body tag and placed your image into it.
<ul id="sliderImageGallery">
<li>
<img src="../images/slidingImage/1.jpg" alt="image1" title="Image Title" data-description="Image description" />
</li>
<li>
<img src="../images/slidingImage/2.jpg" alt="image2" />
</li>
<li>
<img src="../images/slidingImage/3.jpg" alt="image3" />
</li>
<li>
<img src="../images/slidingImage/4.jpg" alt="image4" />
</li>
<li>
<img src="../images/slidingImage/5.jpg" alt="image5" />
</li>
</ul>Now call Jquery slider plugin
<script type="text/javascript">
$(function () {
$('#sliderImageGallery').galleryView();
});
</script>Or you can also override this:
<script type="text/javascript">
$(function () {
$('#sliderImageGallery').galleryView({
panel_width: 765,
panel_height: 298,
frame_width: 120,
frame_height: 90
});
});
</script>You can also modify other options provided by this plugin.Default plugin options are given bellow:
// General Options
transition_speed: 1000, //INT - duration of panel/frame transition (in milliseconds)
transition_interval: 5000, //INT - delay between panel/frame transitions (in milliseconds)
easing: 'swing', //STRING - easing method to use for animations (jQuery provides 'swing' or 'linear', more available with jQuery UI or Easing plugin)
// Panel Options
show_panels: true, //BOOLEAN - flag to show or hide panel portion of gallery
show_panel_nav: true, //BOOLEAN - flag to show or hide panel navigation buttons
enable_overlays: false, //BOOLEAN - flag to show or hide panel overlays
panel_width: 800, //INT - width of gallery panel (in pixels)
panel_height: 400, //INT - height of gallery panel (in pixels)
panel_animation: 'fade', //STRING - animation method for panel transitions (crossfade,fade,slide,none)
panel_scale: 'crop', //STRING - cropping option for panel images (crop = scale image and fit to aspect ratio determined by panel_width and panel_height, fit = scale image and preserve original aspect ratio)
overlay_position: 'bottom', //STRING - position of panel overlay (bottom, top)
pan_images: false, //BOOLEAN - flag to allow user to grab/drag oversized images within gallery
pan_style: 'drag', //STRING - panning method (drag = user clicks and drags image to pan, track = image automatically pans based on mouse position
pan_smoothness: 15, //INT - determines smoothness of tracking pan animation (higher number = smoother)
// Filmstrip Options
start_frame: 1, //INT - index of panel/frame to show first when gallery loads
show_filmstrip: true, //BOOLEAN - flag to show or hide filmstrip portion of gallery
show_filmstrip_nav: true, //BOOLEAN - flag indicating whether to display navigation buttons
enable_slideshow: true, //BOOLEAN - flag indicating whether to display slideshow play/pause button
autoplay: false, //BOOLEAN - flag to start slideshow on gallery load
show_captions: false, //BOOLEAN - flag to show or hide frame captions
filmstrip_size: 3, //INT - number of frames to show in filmstrip-only gallery
filmstrip_style: 'scroll', //STRING - type of filmstrip to use (scroll = display one line of frames, scroll filmstrip if necessary, showall = display multiple rows of frames if necessary)
filmstrip_position: 'bottom', //STRING - position of filmstrip within gallery (bottom, top, left, right)
frame_width: 80, //INT - width of filmstrip frames (in pixels)
frame_height: 40, //INT - width of filmstrip frames (in pixels)
frame_opacity: 0.4, //FLOAT - transparency of non-active frames (1.0 = opaque, 0.0 = transparent)
frame_scale: 'crop', //STRING - cropping option for filmstrip images (same as above)
frame_gap: 5, //INT - spacing between frames within filmstrip (in pixels)
// Info Bar Options
show_infobar: true, //BOOLEAN - flag to show or hide infobar
infobar_opacity: 1 //FLOAT - transparency for info bardownload source code and try to implement.Thank you.