MVC3.0 image scrolling and album display (lower)

First, add the js file and CSS sample file jquery.ad-gallery.css. For details, see (js File Uploaded By MVC3.0 image ).

Second, you can scroll through the view layer by applying the corresponding div style. You can select the scroll mode, vertical, progressive, dynamic, and slide to preview

Use jquery's corresponding control, namely:

Jquery controls the Code of the scroll Mode

1 // scroll Mode
2 <select id = "switch-effect">
3 <option value = "slide-hori"> horizontal scrolling </option>
4 <option value = "slide-vert"> vertical scroll </option>
5 <option value = "resize"> dynamic changes </option>
6 <option value = "fade"> progressive fade-out </option>
7 </select>
8 & nbsp; <a href = "#" id = "toggle-slideshow"> show/hide slides </a> & nbsp;
9
10
11
12 // jquery code
13 $ (function ()
14 {
15 $ (". thumb"). LoadThumImage (true, 60 );
16 var galleries = $ ('. ad-gallery'). adGallery ();
17 $ ('# switch-effect'). change (
18 function ()
19 {
20 galleries [0]. settings. effect = $ (this). val ();
21 return false;
22}
23 );
24 $ ('# toggle-slideshow'). click (
25 function ()
26 {
27 galleries [0]. slideshow. toggle ();
28 return false;
29}
30 );
31 });

Apply the corresponding div in the view layer

Apply div Code

1 <div id = "gallery" class = "ad-gallery">
2 <div class = "ad-image-wrapper">
3 
4 </div>
5 <div class = "ad-controls">
6 </div>
7 <div class = "ad-nav">
8 <div class = "ad-thumbs">
9 <ul class = "ad-thumb-list">
10. The image is displayed cyclically. Remember: style !! 
11 </ul>
12 </div>
13 </div>
14 </div>

When the loaded album image is not displayed, you will be prompted with a cover "no album image"!

Finally, you can directly perform operations on the database by classifying and editing related albums.

Conclusion: The key is to search for the corresponding album mode. Some online code may have compatibility or js errors. Select this template after filtering. Thank you!

Be careful when embedding the corresponding div.