Заставить flexslider работать со всплывающим окном

Максим.1

Я пытаюсь создать всплывающее окно, в котором будет отображаться слайдер всех изображений, принадлежащих элементу.

Мне удалось создать всплывающее окно для отображения правильных изображений, но мой слайдер работает неправильно.

Я попытался создать jsfiddle, чтобы показать, что я имею в виду, но это не удалось.

Итак, вот ссылка на страницу, просто нажмите на одно из изображений, и появится всплывающее окно, и вы увидите два изображения, которые предположительно являются навигацией по изображениям, и если вы перейдете на одну вкладку, а затем вернетесь, то Основное изображение отображается, и оно выглядит так, как должно выглядеть, если это имеет смысл.

Я не уверен, что с этим не так.

http://www.webkrunch.co.za/clients/bellamage-html/wedding.html

HTML

 


$(document).ready(function(){


$('.category_items').click(function(){


$('.items_links').hide();var target_category = $(this).attr('data-category');


$('.items_links[data-item='+ target_category +']').show();returnfalse;});


//test


$('.flexslider').flexslider({


animation:"slide",


controlNav:"thumbnails"});


//END GALLERY POPUP

Код (разметка): main.js

  [LIST=1] [*]<buttontype="button"class="btn btn-primary btn-lg"data-toggle="modal"data-target="#myModal"><aclass="category_items popup"href="javascript:void(0);"data-category="blue-cake"><imgsrc="images/blue_cake_crop.jpg"></a></button> <!-- Modal --><divclass="modal fade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"><divclass="modal-dialog"role="document"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">&times;</span></button><h4class="modal-title"id="myModalLabel">Modal title</h4></div><divclass="modal-body"><divclass="flexslider"><ulclass="slides"><lidata-thumb="images/thumbs/blue_sugar_glass_crop.jpg"><imgsrc="images/blue_sugar_glass_crop.jpg"></li><lidata-thumb="images/thumbs/blue_cake_crop.jpg"><imgsrc="images/blue_cake_crop.jpg"></li></ul></div></div><divclass="modal-footer"><buttontype="button"class="btn btn-default"data-dismiss="modal">Close</button><buttontype="button"class="btn btn-primary">Save changes</button></div></div></div></div> [/LIST]

Код (разметка):

AlexM1

Там какой-то баг.

С вашим кодом все в порядке.

Когда я открываю модальное окно, ничего не отображается, кроме больших пальцев.

Однако, если я открою другую вкладку в своем браузере, а затем вернусь к модальному модулю (все еще открытому), он начнет показывать большие изображения. Я попробовал их все за последние несколько лет.

Ничто не сравнится с слайдером в виде совы. Здесь есть упрощенная версия:
http://jsfiddle.net/defaye/7b7gmqda/

HTML-страница. Просто скопируйте и вставьте его в модальное окно. Затем замените их изображения своими. Затем вы также можете хранить библиотеки в своем каталоге, если хотите.

 


<!DOCTYPE html>


<html>


<head>


<meta http-equiv="content-type" content="текст/html; кодировка = UTF-8">


<script type="text/javascript" src="[URL='https://lumtu.com/yti/auEEuanNodHRwOi8vY29kZS5qcXVlcnkuY29tL2pxdWVyeS0xLjEwLjwEj']http://code.jquery.com/jquery-1.10.1.js[/URL]"></script>


<link rel="stylesheet" type="text/css" href="[URL='https://lumtu.com/yti/cj55jc3NodHRwczovL2NkbmpzLmNsb3VkZmxhcmUuY29tL2FqYXgvbGlicy9vd2wtY2Fyb3VzZWwvMS4zLjMvb3dsLnRyYW5zaXRpb25zLm1pbip1m']https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css[/URL]">


<link rel="stylesheet" type="text/css" href="[URL='https://lumtu.com/yti/cj55jc3NodHRwczovL2NkbmpzLmNsb3VkZmxhcmUuY29tL2FqYXgvbGlicy9vd2wtY2Fyb3VzZWwvMS4zLjMvb3dsLnRoZW1lLm1pbip1m']https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css[/URL]">


<link rel="stylesheet" type="text/css" href="[URL='https://lumtu.com/yti/cj55jc3NodHRwczovL2NkbmpzLmNsb3VkZmxhcmUuY29tL2FqYXgvbGlicy9vd2wtY2Fyb3VzZWwvMS4zLjMvb3dsLmNhcm91c2VsLm1pbip1m']https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css[/URL]">


<script type="text/javascript" src="[URL='https://lumtu.com/yti/a4ii4anNodHRwczovL2NkbmpzLmNsb3VkZmxhcmUuY29tL2FqYXgvbGlicy9vd2wtY2Fyb3VzZWwvMS4zLjMvb3dsLmNhcm91c2VsLm1pb1mL']https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js[/URL]"></script>


<style type="text/css"> #owl-demo .item img { display: block; width: 100%; height: auto; }






.owl-theme .owl-controls { position: relative; } .owl-theme .owl-controls .owl-page { position: relative; display: inline-block; width: 6em; height: 3em; margin: 0 0.25em; outline: none; transition: all 0.1s ease-in-out; } .owl-theme .owl-controls .owl-page:focus { outline: none; } .owl-theme .owl-controls .owl-page span { display: none; } .owl-theme .owl-controls .owl-page.active { transform: scale(1.1); } .owl-theme .owl-controls .owl-page:not(.active) { transform: scale(0.8); -webkit-box-shadow: inset 0 0 10em 0 rgba(0, 0, 0, 0.75); box-shadow: inset 0 0 10em 0 rgba(0, 0, 0, 0.75); } .owl-theme .owl-controls .owl-page:not(.active):hover { transform: scale(0.9); } .owl-theme .owl-controls .owl-buttons .owl-prev, .owl-theme .owl-controls .owl-buttons .owl-next { font-size: 2em; display: block; position: absolute; top: 0; line-height: 0.75em; width: 1em; height: 1em; border-radius: 1px; background-color: #c0c0c0; } .owl-theme .owl-controls .owl-buttons .owl-prev:focus, .owl-theme .owl-controls .owl-buttons .owl-next:focus { -webkit-box-shadow: inset 0 0 10em 0 rgba(255, 0, 0, 0.75); box-shadow: inset 0 0 10em 0 rgba(255, 0, 0, 0.75); } .owl-theme .owl-controls .owl-buttons .owl-prev { left: 0.25em; } .owl-theme .owl-controls .owl-buttons .owl-next { right: 0.25em; }


</style>


<script type="text/javascript">


$(document).ready(function () {


$("#owl-demo").owlCarousel({


navigation: true,


navigationText: ['&lsaquo;','&rsaquo;'],


slideSpeed: 300,


paginationSpeed: 400,


singleItem: true,


afterInit: makePages,


afterUpdate: makePages


});


function makePages() {


$.each(this.owl.userItems, function(i) {


$('.owl-controls .owl-page').eq(i)


.css({


'background': 'url(' + $(this).find('img').attr('src') + ')',


'background-size': 'cover'


})


});


}


});


</script>


</head>


<body>


<div id="owl-demo" class="owl-carousel owl-theme">


<div class="item"><img src="[URL='https://lumtu.com/yti/PAMMAPzFodHRwOi8vbG9yZW1waXhlbC5jb20vOTYwLzM1zLw']http://www.lorempixel.com/960/350?1[/URL]"></div>


<div class="item"><img src="[URL='https://lumtu.com/yti/PAMMAPzJodHRwOi8vbG9yZW1waXhlbC5jb20vOTYwLzM1zLw']http://www.lorempixel.com/960/350?2[/URL]"></div>


<div class="item"><img src="[URL='https://lumtu.com/yti/PAMMAPzNodHRwOi8vbG9yZW1waXhlbC5jb20vOTYwLzM1zLw']http://www.lorempixel.com/960/350?3[/URL]"></div>


</div>


</body>


</html>

Код (разметка):

Похожие темы	Дата
Профессиональный JavaScript от IT Bursa	19.10.2024, 18:10
Интернет-магазин На Php, Mysql, Javascript, Ajax	19.10.2024, 18:10
Курс "learn Javascript And Jquery" От Codyhouse	19.10.2024, 18:10
Как добавить видео на html-страницу через JavaScript	19.10.2024, 18:10
Налоги в зависимости от государства	19.10.2024, 18:10
Как получить значение идентификатора из URL-адреса и динамически создавать контент	19.10.2024, 18:10
Реализация FCM JavaScript API	19.10.2024, 18:10
Захват атрибутов дочернего элемента SVG	19.10.2024, 18:10
ПОЖАЛУЙСТА ПОМОГИ! Кнопка переключения воспроизведения/остановки	19.10.2024, 18:10
elementals.js 3.0 RC 1 Публичный выпуск	19.10.2024, 18:10

Заставить flexslider работать со всплывающим окном

Максим.1

AlexM1

I AM

Интересно