توضیحات و دانلود

گالری تصاویر jQuery Carousel با تصاویر Slider در ASP.Net MVC
0 0
گالری تصاویر jQuery Carousel با تصاویر Slider در ASP.Net MVC

با سلام  در این مقاله با یک مثال توضیح خواهیم داد که چگونه می توان از گالری تصویر jQuery Carousel با تصاویر Slider در ASP.Net MVC Razor استفاده کرد.
گالری تصاویر jQuery Carousel با Image Slider با کمک پلاگین jQuery jCarousel در ASP.Net MVC Razor اجرا می شود. همچنین می توانید برای جمع آوری تصاویر از پایگاه داده در گالری jQuery Carousel با تصاویر Slider استفاده کنید .
Controller
Controller از روش زیر تشکیل شده است.
روش انجام عملیات GET
در داخل این روش ، یک لیست کلی از رشته ساخته شده است. مجموعه Generic List با URL برخی از تصاویر پویا جمع شده است.
توجه : تصاویر URL نیز می تواند در پایگاه داده ذخیره شود و در مجموعه فهرست عمومی قرار گیرد. این مجموعه Generic List در نهایت به Viewباز می گردد. .

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        List<string> images = new List<string>();
        images.Add("https://static.flickr.com/66/199481236_dc98b5abb3_s.jpg");
        images.Add("https://static.flickr.com/75/199481072_b4a0d09597_s.jpg");
        images.Add("https://static.flickr.com/57/199481087_33ae73a8de_s.jpg");
        images.Add("https://static.flickr.com/77/199481108_4359e6b971_s.jpg");
        images.Add("https://static.flickr.com/58/199481143_3c148d9dd3_s.jpg");
        images.Add("https://static.flickr.com/72/199481203_ad4cdcf109_s.jpg");
        images.Add("https://static.flickr.com/58/199481218_264ce20da0_s.jpg");
        images.Add("https://static.flickr.com/69/199481255_fdfe885f87_s.jpg");
        images.Add("https://static.flickr.com/60/199480111_87d4cb3e38_s.jpg");
        images.Add("https://static.flickr.com/70/229228324_08223b70fa_s.jpg");
 
        return View(images);
    }
}

View
در داخل View ، کلاس رشته به عنوان IEnumerable اعلام می شود که مشخص می کند که آن به عنوان یک مجموعه در دسترس خواهد بود.
یک حلقه بر روی Model اجرا می شود تا یک لیست بدون کنترل HTML ایجاد کند که هر موردی حاوی یک عنصر تصویر HTML و URL آن به مقدار عنصر Model یعنی URL تنظیم می شود.
سرانجام در document ready فایل jQuery ، پلاگین jQuery jCarousel به عنصر لیست نامرتب HTML اعمال می شود.

@model IEnumerable<string>
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <ul id="mycarousel" class="jcarousel-skin-tango">
        @foreach (string image in Model)
        {
            <li>
                <img alt=""style='height: 75px; width: 75px' src='@image'/>
            </li>
        }
    </ul>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jcarousel/0.2.8/jquery.jcarousel.min.js"></script>
    <link href="https://cdn.jsdelivr.net/jcarousel/0.2.8/skins/tango/skin.css" rel="Stylesheet"/>
    <script type="text/javascript">
    $(function () {
        $('#mycarousel').jcarousel();
    });
    </script>
</body>
</html>

عکس صفحه

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :