codehaven - php snippets - coding help
Generic filters
Exact matches only
    • octopus energy discount code

    Thumbnail Gallery Fullscreen image on Click

    28th March 2020

    Jquery Misc

    jquery icon

    And when the image is clicked becomes below

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
     
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
     
    <!------ Include the above in your HEAD tag ---------->
     
    <div class="row">
     
        <div class="col-lg-12">
            <h1 class="page-header">Thumbnail Gallery</h1>
        
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="https://upload.wikimedia.org/wikipedia/commons/8/83/Tesla_Model_3_parked%2C_front_driver_side.jpg" data-target="#image-gallery">
                    <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/8/83/Tesla_Model_3_parked%2C_front_driver_side.jpg" alt="Short alt text">
                </a>
            </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="If you sponsor me, I can drive this car" data-image="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Tesla_Model_3_Monaco_IMG_1212.jpg/800px-Tesla_Model_3_Monaco_IMG_1212.jpg" data-target="#image-gallery">
                    <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Tesla_Model_3_Monaco_IMG_1212.jpg/800px-Tesla_Model_3_Monaco_IMG_1212.jpg" alt="A alt text">
                </a>
            </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Im so nice" data-caption="And if there is money left, my girlfriend will receive this car" data-image="https://thedriven.io/wp-content/uploads/2020/01/Model-Y-Side-Blue.jpg" data-target="#image-gallery">
                    <img class="img-responsive" src="https://thedriven.io/wp-content/uploads/2020/01/Model-Y-Side-Blue.jpg" alt="Another alt text">
                </a>
            </div>
               <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Im so nice" data-caption="And if there is money left, my girlfriend will receive this car" data-image="http://upload.wikimedia.org/wikipedia/commons/7/78/1997_Fiat_Panda.JPG" data-target="#image-gallery">
                    <img class="img-responsive" src="http://upload.wikimedia.org/wikipedia/commons/7/78/1997_Fiat_Panda.JPG" alt="Another alt text">
                </a>
            </div>
    </div>
     
     
    <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="image-gallery-title"></h4>
                </div>
                <div class="modal-body">
                    <img id="image-gallery-image" class="img-responsive" src="">
                </div>
                <div class="modal-footer">
     
                    <div class="col-md-2">
                        <button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
                    </div>
     
                    <div class="col-md-8 text-justify" id="image-gallery-caption">
                        This text will be overwritten by jQuery
                    </div>
     
                    <div class="col-md-2">
                        <button type="button" id="show-next-image" class="btn btn-default">Next</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
     
    <script type="text/javascript">
      
    $(document).ready(function(){
     
        loadGallery(true, 'a.thumbnail');
     
        //This function disables buttons when needed
        function disableButtons(counter_max, counter_current){
            $('#show-previous-image, #show-next-image').show();
            if(counter_max == counter_current){
                $('#show-next-image').hide();
            } else if (counter_current == 1){
                $('#show-previous-image').hide();
            }
        }
     
        /**
         *
         * @param setIDs        Sets IDs when DOM is loaded. If using a PHP counter, set to false.
         * @param setClickAttr  Sets the attribute for the click handler.
         */
     
        function loadGallery(setIDs, setClickAttr){
            var current_image,
                selector,
                counter = 0;
     
            $('#show-next-image, #show-previous-image').click(function(){
                if($(this).attr('id') == 'show-previous-image'){
                    current_image--;
                } else {
                    current_image++;
                }
     
                selector = $('[data-image-id="' + current_image + '"]');
                updateGallery(selector);
            });
     
            function updateGallery(selector) {
                var $sel = selector;
                current_image = $sel.data('image-id');
                $('#image-gallery-caption').text($sel.data('caption'));
                $('#image-gallery-title').text($sel.data('title'));
                $('#image-gallery-image').attr('src', $sel.data('image'));
                disableButtons(counter, $sel.data('image-id'));
            }
     
            if(setIDs == true){
                $('[data-image-id]').each(function(){
                    counter++;
                    $(this).attr('data-image-id',counter);
                });
            }
            $(setClickAttr).on('click',function(){
                updateGallery($(this));
            });
        }
    });
     
    </script>
     

    Was this code snippet helpful?

    RSS Latest Snippets
    LINKS
    A Repository of Code Snippets in many Programming Languages:-

    PHP – JQUERY
    CSS – MYSQL
    WORDPRESS – JAVASCRIPT
    WOOCOMMERCE – HTML

    © 2022 CODEHAVEN