1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Getting flexslider to work on popup

Discussion in 'jQuery' started by cerberus478, Feb 3, 2016.

0
  1. #1
    I'm trying to create a pop up that will display a slider of all the images that belongs to an item. I've managed to create the popup to display the correct images but my slider isn't working correctly, I've tried to create a jsfiddle to show what I mean but that didn't pan out so well. So here is a link to the page, just click on one of the images and a popup will be shown and you can see the 2 images that is suppose to be the image nav and if you go to one tab and then go back then the main image is showing and it looks how it's suppose to look, if that makes sense. I'm not sure what is going wrong with this.

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

    html
    
[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]
    Code (markup):
    main.js
    
$(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
    Code (markup):
     
    cerberus478, Feb 3, 2016 IP
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #2
    There's some kind of a bug. Nothing is wrong with your code. When I open your modal nothing shows up except the thumbs. However, if I open another tab in my browser and then go back to your modal (still open) it begins to show the large images.

    I tried all of them in the last several years. Nothing beats the owl slider.

    There's a simplified version here:

    http://jsfiddle.net/defaye/7b7gmqda/

    The html page. Just copy and paste it into your modal. Then substitute their images with yours. Then you can store the libraries in your directory too if you want to.

    

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></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="http://www.lorempixel.com/960/350?1"></div>
<div class="item"><img src="http://www.lorempixel.com/960/350?2"></div>
<div class="item"><img src="http://www.lorempixel.com/960/350?3"></div>
</div>

</body>
</html>
    Code (markup):
     
    qwikad.com, Feb 8, 2016 IP