WordPress.org
Get WordPress

Plugin Directory

Changeset 3374967


Ignore:
Timestamp:
10/08/2025 10:11:06 AM (6 months ago)
Author:
awordpresslife
Message:

new update

Location:
wp-instagram-feed-awplife
Files:
41 added
5 edited

Legend:

Unmodified
Added
Removed

  • wp-instagram-feed-awplife/trunk/css/main.css

    r2916764 r3374967  
    2323    text-align: center;
    2424}
     25/* Instagram Navigation Arrows */
     26.instagram-nav-arrow {
     27    position: absolute;
     28    top: 50%;
     29    transform: translateY(-50%);
     30    z-index: 10;
     31    cursor: pointer;
     32    background: rgba(255, 255, 255, 0.9);
     33    color: #262626;
     34    border-radius: 50%;
     35    width: 44px;
     36    height: 44px;
     37    display: flex;
     38    align-items: center;
     39    justify-content: center;
     40    font-size: 20px;
     41    font-weight: bold;
     42    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
     43    opacity: 0.8;
     44    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     45    border: 1px solid rgba(0, 0, 0, 0.1);
     46    backdrop-filter: blur(10px);
     47}
     48
     49.instagram-nav-arrow:hover {
     50    opacity: 1;
     51    background: rgba(255, 255, 255, 1);
     52    transform: translateY(-50%) scale(1.1);
     53    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
     54}
     55
     56.instagram-nav-arrow:active {
     57    transform: translateY(-50%) scale(0.95);
     58}
     59
     60.instagram-nav-arrow.carouselGallery-left {
     61    left: 20px;
     62    animation: slideInFromLeft 0.5s ease-out 0.3s both;
     63}
     64
     65.instagram-nav-arrow.carouselGallery-right {
     66    right: 20px;
     67    animation: slideInFromRight 0.5s ease-out 0.3s both;
     68}
     69
     70.instagram-nav-arrow.disabled {
     71    opacity: 0.3;
     72    cursor: not-allowed;
     73    background: rgba(255, 255, 255, 0.5);
     74}
     75
     76.instagram-nav-arrow.disabled:hover {
     77    transform: translateY(-50%) scale(1);
     78    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     79}
     80
     81@keyframes slideInFromLeft {
     82    0% {
     83        transform: translateY(-50%) translateX(-20px);
     84        opacity: 0;
     85    }
     86    100% {
     87        transform: translateY(-50%) translateX(0);
     88        opacity: 0.8;
     89    }
     90}
     91
     92@keyframes slideInFromRight {
     93    0% {
     94        transform: translateY(-50%) translateX(20px);
     95        opacity: 0;
     96    }
     97    100% {
     98        transform: translateY(-50%) translateX(0);
     99        opacity: 0.8;
     100    }
     101}
     102
     103/* Navigation Arrow Icons */
     104.instagram-nav-arrow svg {
     105    transition: all 0.2s ease;
     106}
     107
     108.instagram-nav-arrow:hover svg {
     109    transform: scale(1.1);
     110}
     111
     112/* Hide navigation arrows when transitioning */
     113.carouselGallery-wrapper.transitioning .instagram-nav-arrow {
     114    opacity: 0.3;
     115    pointer-events: none;
     116}
     117
     118/* Instagram Close Button - Touching lightbox */
     119.instagram-close-btn {
     120    position: absolute;
     121    top: -20px;
     122    right: -20px;
     123    z-index: 12;
     124    cursor: pointer;
     125    color: #fff;
     126    font-size: 28px;
     127    font-weight: bold;
     128    background: rgba(0, 0, 0, 0.8);
     129    border-radius: 50%;
     130    width: 40px;
     131    height: 40px;
     132    display: flex !important;
     133    align-items: center;
     134    justify-content: center;
     135    transition: all 0.2s ease;
     136    line-height: 1;
     137    user-select: none;
     138    border: 2px solid rgba(255, 255, 255, 0.5);
     139    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
     140}
     141
     142.instagram-close-btn:hover {
     143    background: rgba(0, 0, 0, 0.9);
     144    border-color: rgba(255, 255, 255, 0.7);
     145    transform: scale(1.05);
     146    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
     147}
     148
     149.instagram-close-btn:active {
     150    transform: scale(0.95);
     151}
     152
     153/* Ensure close button touches lightbox edge */
     154.instagram-lightbox-modal .instagram-close-btn,
     155.carouselGallery-modal .instagram-close-btn {
     156    top: -20px;
     157    right: -20px;
     158}
     159
     160/* Close button animation on lightbox open */
     161.instagram-close-btn {
     162    animation: closeButtonSlideIn 0.4s ease-out 0.2s both;
     163}
     164
     165@keyframes closeButtonSlideIn {
     166    0% {
     167        transform: scale(0.5) rotate(90deg);
     168        opacity: 0;
     169    }
     170    100% {
     171        transform: scale(1) rotate(0deg);
     172        opacity: 1;
     173    }
     174}
     175
     176/* Ensure cross button is always visible */
     177.instagram-lightbox-modal .instagram-close-btn,
     178.carouselGallery-modal .instagram-close-btn {
     179    display: flex !important;
     180    visibility: visible !important;
     181    opacity: 1 !important;
     182}
     183
     184/* Legacy close button support */
     185.iconscircle-cross {
     186    display: none !important;
     187}
     188
    25189.carouselGallery-left,
    26190.carouselGallery-right{
    … …  
    86250    text-align: right;
    87251}
     252/* Instagram Style Lightbox */
     253.instagram-lightbox-overlay {
     254    z-index: 9999;
     255    position: fixed;
     256    top: 0;
     257    left: 0;
     258    width: 100vw;
     259    height: 100vh;
     260    background-color: rgba(0, 0, 0, 0.85);
     261    display: flex;
     262    align-items: center;
     263    justify-content: center;
     264    opacity: 0;
     265    animation: fadeInOverlay 0.4s ease-out forwards;
     266}
     267
     268@keyframes fadeInOverlay {
     269    0% {
     270        opacity: 0;
     271        backdrop-filter: blur(0px);
     272    }
     273    100% {
     274        opacity: 1;
     275        backdrop-filter: blur(2px);
     276    }
     277}
     278
     279.instagram-lightbox-open {
     280    overflow: hidden;
     281}
     282
    88283.carouselGallery-wrapper{
    89284    z-index: 1111;
    90     width: 100%;
     285    width: 100vw;
     286    height: 100vh;
    91287    position: fixed;
    92288    top: 0;
     289    left: 0;
    93290    background-color: rgba(12,12,12,0.8);
    94     width: 100vw;
     291    display: flex;
     292    align-items: center;
     293    justify-content: center;
     294}
     295/* Instagram Modal Container */
     296.instagram-lightbox-modal {
     297    position: relative;
     298    max-width: 90vw;
     299    max-height: 90vh;
     300    background: #fff;
     301    border-radius: 8px;
     302    overflow: visible; /* Allow close button to show outside */
     303    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
     304    transform: scale(0.8) translateY(20px);
     305    opacity: 0;
     306    animation: modalSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
     307    margin: auto;
     308    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
     309}
     310
     311/* Smooth transition for navigation */
     312.carouselGallery-wrapper.transitioning .instagram-lightbox-modal,
     313.carouselGallery-wrapper.transitioning .carouselGallery-modal {
     314    transform: scale(0.92) translateY(10px);
     315    opacity: 0.6;
     316    filter: blur(1px);
     317    transition: all 0.3s ease-out;
     318}
     319
     320@keyframes modalSlideIn {
     321    0% {
     322        transform: scale(0.8) translateY(30px);
     323        opacity: 0;
     324    }
     325    60% {
     326        transform: scale(1.02) translateY(-5px);
     327        opacity: 0.9;
     328    }
     329    100% {
     330        transform: scale(1) translateY(0px);
     331        opacity: 1;
     332    }
     333}
     334
     335/* Close animation */
     336.instagram-lightbox-modal.closing,
     337.carouselGallery-modal.closing {
     338    animation: modalSlideOut 0.3s ease-in forwards;
     339}
     340
     341@keyframes modalSlideOut {
     342    0% {
     343        transform: scale(1) translateY(0px);
     344        opacity: 1;
     345    }
     346    100% {
     347        transform: scale(0.9) translateY(20px);
     348        opacity: 0;
     349    }
     350}
     351
     352.instagram-modal-container {
     353    position: relative;
     354    width: 100%;
    95355    height: 100%;
    96 }
     356    display: flex;
     357    flex-direction: column;
     358    overflow: visible;
     359}
     360
     361.instagram-content-wrapper {
     362    display: flex;
     363    min-height: 400px;
     364    max-height: 80vh;
     365    flex: 1;
     366}
     367
     368/* Force center alignment for all lightbox modals */
     369.carouselGallery-modal {
     370    margin: auto !important;
     371    position: relative !important;
     372    top: auto !important;
     373    left: auto !important;
     374    transform: none !important;
     375}
     376
    97377.carouselGallery-wrapper > div {
    98378    z-index: 2;
    99     position: absolute;
    100     top: 52%;
    101     left: 50%;
    102     transform: translate(-50%, -50%);
     379    position: relative;
     380    max-width: 90vw;
     381    max-height: 90vh;
     382    width: auto;
     383    margin: auto;
     384    overflow: visible; /* Allow close button to show outside */
     385}
     386/* Instagram Image Section */
     387.instagram-image-section {
     388    flex: 1;
     389    display: flex;
     390    align-items: center;
     391    justify-content: center;
     392    background: #000;
     393    min-width: 0;
     394    animation: slideInLeft 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
     395}
     396
     397@keyframes slideInLeft {
     398    0% {
     399        transform: translateX(-30px);
     400        opacity: 0;
     401    }
     402    100% {
     403        transform: translateX(0);
     404        opacity: 1;
     405    }
     406}
     407
     408.instagram-media {
    103409    max-width: 100%;
    104     width: auto;
    105 }
     410    max-height: 100%;
     411    object-fit: contain;
     412    display: block;
     413}
     414
     415/* Instagram Sidebar */
     416.instagram-sidebar {
     417    width: 340px;
     418    background: #fff;
     419    display: flex;
     420    flex-direction: column;
     421    border-left: 1px solid #dbdbdb;
     422    animation: slideInRight 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
     423}
     424
     425@keyframes slideInRight {
     426    0% {
     427        transform: translateX(30px);
     428        opacity: 0;
     429    }
     430    100% {
     431        transform: translateX(0);
     432        opacity: 1;
     433    }
     434}
     435
     436.instagram-header {
     437    padding: 16px;
     438    border-bottom: 1px solid #efefef;
     439    display: flex;
     440    align-items: center;
     441    justify-content: space-between;
     442}
     443
     444.instagram-user-info {
     445    display: flex;
     446    align-items: center;
     447}
     448
     449.instagram-avatar {
     450    width: 32px;
     451    height: 32px;
     452    margin-right: 12px;
     453}
     454
     455.instagram-avatar img {
     456    width: 100%;
     457    height: 100%;
     458    border-radius: 50%;
     459    object-fit: cover;
     460}
     461
     462.instagram-username a {
     463    font-weight: 600;
     464    color: #262626;
     465    text-decoration: none;
     466    font-size: 14px;
     467}
     468
     469.instagram-username a:hover {
     470    text-decoration: underline;
     471}
     472
     473.instagram-follow-btn {
     474    margin-left: auto;
     475}
     476
     477.instagram-follow-link {
     478    color: #0095f6;
     479    font-weight: 600;
     480    text-decoration: none;
     481    font-size: 14px;
     482    padding: 5px 9px;
     483    border: 1px solid #0095f6;
     484    border-radius: 4px;
     485    transition: all 0.2s ease;
     486}
     487
     488.instagram-follow-link:hover {
     489    background: #0095f6;
     490    color: #fff;
     491}
     492
    106493.carouselGallery-scrollbox {
    107494    display: block;
    … …  
    109496    overflow-x: hidden;
    110497    overflow-y: auto;
     498}
     499
     500/* Instagram Content */
     501.instagram-content {
     502    flex: 1;
     503    padding: 16px;
     504    overflow-y: auto;
     505    max-height: calc(80vh - 120px);
     506}
     507
     508.instagram-caption {
     509    margin-bottom: 16px;
     510}
     511
     512.instagram-username-caption {
     513    font-weight: 600;
     514    margin-right: 8px;
     515}
     516
     517.instagram-username-caption a {
     518    color: #262626;
     519    text-decoration: none;
     520    font-size: 14px;
     521}
     522
     523.instagram-text {
     524    color: #262626;
     525    font-size: 14px;
     526    line-height: 18px;
     527    word-wrap: break-word;
     528}
     529
     530.instagram-hashtag {
     531    color: #00376b;
     532    text-decoration: none;
     533    font-weight: 400;
     534}
     535
     536.instagram-hashtag:hover {
     537    text-decoration: underline;
     538}
     539
     540/* Instagram Actions */
     541.instagram-actions {
     542    padding: 16px;
     543    border-top: 1px solid #efefef;
     544    margin-top: auto;
     545}
     546
     547.instagram-action-buttons {
     548    display: flex;
     549    gap: 16px;
     550    margin-bottom: 8px;
     551}
     552
     553.instagram-action-btn {
     554    color: #262626;
     555    text-decoration: none;
     556    transition: color 0.2s ease;
     557}
     558
     559.instagram-action-btn:hover {
     560    color: #8e8e8e;
     561}
     562
     563.instagram-action-btn svg {
     564    width: 24px;
     565    height: 24px;
     566}
     567
     568.instagram-date {
     569    color: #8e8e8e;
     570    font-size: 10px;
     571    text-transform: uppercase;
     572    letter-spacing: 0.2px;
    111573}
    112574
    … …  
    297759    .carouselGallery-left{
    298760         left: -10px;
     761    }
     762}
     763
     764/* Instagram Lightbox Responsive */
     765@media (max-width: 1024px) {
     766    .instagram-lightbox-modal {
     767        max-width: 95vw;
     768        max-height: 95vh;
     769    }
     770
     771    .instagram-content-wrapper {
     772        flex-direction: column;
     773        max-height: 95vh;
     774    }
     775
     776    .instagram-sidebar {
     777        width: 100%;
     778        max-height: 300px;
     779    }
     780
     781    .instagram-image-section {
     782        min-height: 300px;
     783    }
     784}
     785
     786@media (max-width: 768px) {
     787    .instagram-lightbox-modal {
     788        max-width: 98vw;
     789        max-height: 98vh;
     790        border-radius: 0;
     791    }
     792
     793    .instagram-nav-arrow {
     794        width: 40px;
     795        height: 40px;
     796        font-size: 18px;
     797        background: rgba(255, 255, 255, 0.95) !important;
     798        backdrop-filter: blur(8px);
     799    }
     800
     801    .instagram-nav-arrow:hover {
     802        background: rgba(255, 255, 255, 1) !important;
     803        transform: translateY(-50%) scale(1.05) !important;
     804    }
     805
     806    .instagram-nav-arrow.carouselGallery-left {
     807        left: 15px;
     808    }
     809
     810    .instagram-nav-arrow.carouselGallery-right {
     811        right: 15px;
     812    }
     813
     814    .instagram-close-btn {
     815        top: -15px;
     816        right: -15px;
     817        width: 42px;
     818        height: 42px;
     819        font-size: 26px;
     820        background: rgba(0, 0, 0, 0.85) !important;
     821        border-width: 3px;
     822        display: flex !important;
     823    }
     824
     825    .instagram-close-btn:hover {
     826        background: rgba(0, 0, 0, 0.95) !important;
     827        transform: scale(1.02);
     828    }
     829
     830    .instagram-sidebar {
     831        max-height: 250px;
     832    }
     833
     834    .instagram-content {
     835        max-height: calc(95vh - 100px);
     836    }
     837}
     838
     839@media (max-width: 480px) {
     840    .instagram-header {
     841        padding: 12px;
     842    }
     843
     844    .instagram-content {
     845        padding: 12px;
     846    }
     847
     848    .instagram-actions {
     849        padding: 12px;
     850    }
     851
     852    .instagram-sidebar {
     853        max-height: 200px;
    299854    }
    300855}

  • wp-instagram-feed-awplife/trunk/layout/instagram-grid-layout-shortcode.php

    r3303512 r3374967  
    2020            if($instagram_response == 200) {
    2121                foreach($instagram_data['data'] as $key =>  $attachment_id) {
    22                     $insta_username         = $attachment_id['username'];
    23                     $insta_time             = $attachment_id['timestamp'];
    24                     $insta_photos_link      = $attachment_id['permalink'];
    25                     $insta_media_type       = $attachment_id['media_type'];
    26                     $thumbnail_url          = $attachment_id['media_url']; 
     22                    $insta_username         = isset($attachment_id['username']) ? $attachment_id['username'] : 'Unknown User';
     23                    $insta_time             = isset($attachment_id['timestamp']) ? $attachment_id['timestamp'] : '';
     24                    $insta_photos_link      = isset($attachment_id['permalink']) ? $attachment_id['permalink'] : '#';
     25                    $insta_media_type       = isset($attachment_id['media_type']) ? $attachment_id['media_type'] : 'IMAGE';
     26                    $thumbnail_url          = isset($attachment_id['media_url']) ? $attachment_id['media_url'] : '';
    2727
    28                     if(isset($attachment_id['caption'])){
     28                    if(isset($attachment_id['caption']) && !empty($attachment_id['caption'])){
    2929                    $insta_photos_caption       = $attachment_id['caption'];
    3030                    } else {
    31                         $insta_photos_caption = '';
     31                        $insta_photos_caption = 'No caption available';
    3232                    }
    3333                    if(isset($attachment_id['thumbnail_url'])){
    … …  
    5959                    <?php if($insta_lightbox == 'yes') { ?>
    6060                        <div class="col-md-<?php echo esc_attr( $insta_grid_columns_l ); ?> insta-gallery-div">
    61                             <a class="insta-if-navigation insta-main-div carouselGallery-carousel" type="<?php echo esc_attr( $insta_media_type ); ?>" data-posturl="<?php echo esc_url( $insta_photos_link ); ?>" data-username="<?php echo esc_html( $insta_username ); ?>" data-img-date="<?php echo esc_attr( $newDate ); ?>" data-index="<?php echo esc_attr( $key ); ?>" data-imagetext="<?php echo esc_html( $insta_photos_caption ); ?>" data-imagepath="<?php echo esc_url( $thumbnail_url ); ?>">
     61                            <a class="insta-if-navigation insta-main-div carouselGallery-carousel" type="<?php echo esc_attr( $insta_media_type ); ?>" data-posturl="<?php echo esc_url( $insta_photos_link ); ?>" data-url="<?php echo esc_url( $thumbnail_url ); ?>" data-username="<?php echo esc_html( $insta_username ); ?>" data-imgdate="<?php echo esc_attr( $newDate ); ?>" data-index="<?php echo esc_attr( $key ); ?>" data-imagetext="<?php echo esc_html( $insta_photos_caption ); ?>" data-imagepath="<?php echo esc_url( $thumbnail_url ); ?>">
    6262                                <div class="insta-img-thumbnail">
    6363                                    <img class='insta-img-thumbnail' src='<?php if ( $insta_media_type == 'VIDEO' ) { echo esc_url( $thumbnail_video_image ); } else { echo esc_url( $thumbnail_url );} ?>'>

  • wp-instagram-feed-awplife/trunk/layout/lightbox.php

    r3303512 r3374967  
    33$igp_hover_icon = sanitize_text_field(IFGP_PLUGIN_URL."/img/instagram-gallery-premium.png");
    44?>
    5 <script type="text/javascript">
     5<style>
     6.instagram-lightbox-modal .instagram-media {
     7    max-width: 85% !important;
     8    max-height: 85vh !important;
     9    width: auto !important;
     10    height: auto !important;
     11    object-fit: contain;
     12    margin: 0 auto;
     13    display: block;
     14}
     15
     16.instagram-lightbox-modal .instagram-image-section {
     17    display: flex;
     18    align-items: center;
     19    justify-content: center;
     20    padding: 20px;
     21}
     22
     23@media (max-width: 768px) {
     24    .instagram-lightbox-modal .instagram-media {
     25        max-width: 95% !important;
     26        max-height: 70vh !important;
     27    }
     28}
     29</style>
     30<script type="text/javascript">
    631    jQuery(window).load(function() {
    732        jQuery(function($) {
     33            var scrollTo = 0;
    834            var updateArrows = function(){
    935                $('.carouselGallery-right').removeClass('disabled');
    … …  
    1945            $('body').addClass('noscroll');
    2046            $('body').css('position', 'fixed');
    21                 $('.insta-if-navigation').removeClass('active');
     47                $('.carouselGallery-carousel').removeClass('active');
    2248                $(this).addClass('active');
    2349                showModal($(this));
    … …  
    3359                }
    3460                var nextItem = $('.carouselGallery-carousel[data-index='+nextItemIndex+']');
     61
     62
    3563                if(nextItem.length > 0){
    36                     $('.insta-if-navigation').removeClass('active');
    37                     $('body').find('.carouselGallery-wrapper').remove();
    38                     showModal($(nextItem.get(0)));
    39                     nextItem.first().addClass('active');
     64                    $('.carouselGallery-carousel').removeClass('active');
     65
     66
     67                    $('.carouselGallery-wrapper').addClass('transitioning');
     68                    $('.instagram-lightbox-modal, .carouselGallery-modal').addClass('closing');
     69
     70                    setTimeout(function(){
     71                        $('body').find('.carouselGallery-wrapper').remove();
     72                        showModal(nextItem);
     73                        nextItem.addClass('active');
     74                    }, 250);
    4075                }
    4176                updateArrows();
    … …  
    4378            var modalHtml = '';
    4479            showModal = function(that){
    45                 var username = that.data('username'),
    46                 imagedate = that.data('imgDate'),
    47                 imagetext = that.data('imagetext'),
    48                 imagepath = that.data('imagepath'),
    49                 carouselGalleryUrl = that.data('url');
    50                 postURL =  that.data('posturl');
     80
     81                var rawData = {
     82                    username: that.data('username'),
     83                    imagedate: that.data('imgdate'),
     84                    imagetext: that.data('imagetext'),
     85                    imagepath: that.data('imagepath'),
     86                    url: that.data('url'),
     87                    posturl: that.data('posturl')
     88                };
     89
     90
     91
     92                var username = (rawData.username && rawData.username !== 'undefined' && rawData.username !== '') ? rawData.username : 'Unknown User';
     93                var imagedate = (rawData.imagedate && rawData.imagedate !== 'undefined' && rawData.imagedate !== '') ? rawData.imagedate : 'Recently';
     94                var imagetext = (rawData.imagetext && rawData.imagetext !== 'undefined' && rawData.imagetext !== '') ? rawData.imagetext : 'No caption available';
     95                var imagepath = (rawData.imagepath && rawData.imagepath !== 'undefined' && rawData.imagepath !== '') ? rawData.imagepath : '';
     96                var carouselGalleryUrl = (rawData.url && rawData.url !== 'undefined' && rawData.url !== '') ? rawData.url : '#';
     97                var postURL = (rawData.posturl && rawData.posturl !== 'undefined' && rawData.posturl !== '') ? rawData.posturl : '#';
     98
    5199                maxHeight = $(window).height()-100;
    52                 var tags = imagetext.split('#');
     100                var tags = (imagetext && imagetext !== 'No caption available') ? imagetext.split('#') : ['No caption available'];
    53101               
    54102                if (jQuery('.carouselGallery-wrapper').length === 0) {
    55                         if(typeof imagepath !== 'undefined') {
    56                             modalHtml = "<div class='carouselGallery-wrapper'>";
    57                             modalHtml += "<div class='carouselGallery-modal'><span class='carouselGallery-left'><span class='icons icon-arrow-left6'></span></span><span class='carouselGallery-right'><span class='icons icon-arrow-right6'></span></span>";
    58                             modalHtml += "<div class='container'>";
    59                             modalHtml += "<span class='icons iconscircle-cross close-icon'></span>";
    60                             modalHtml += "<div class='carouselGallery-scrollbox' style='max-height:"+maxHeight+"px'><div class='carouselGallery-modal-image'>";
     103                        if(typeof imagepath !== 'undefined' && imagepath !== '' && imagepath !== null) {
     104                            modalHtml = "<div class='carouselGallery-wrapper instagram-lightbox-overlay'>";
     105                            modalHtml += "<div class='carouselGallery-modal instagram-lightbox-modal'>";
     106                            modalHtml += "<span class='carouselGallery-left instagram-nav-arrow' title='Previous'><svg width='20' height='20' viewBox='0 0 24 24' fill='none'><path d='M15 18l-6-6 6-6' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></span>";
     107                            modalHtml += "<span class='carouselGallery-right instagram-nav-arrow' title='Next'><svg width='20' height='20' viewBox='0 0 24 24' fill='none'><path d='M9 18l6-6-6-6' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></span>";
     108                            modalHtml += "<span class='instagram-close-btn' title='Close'>&times;</span>";
     109                            modalHtml += "<div class='instagram-modal-container'>";
     110                            modalHtml += "<div class='instagram-content-wrapper'>";
     111                            modalHtml += "<div class='instagram-image-section'>";
    61112                            if(that[0].attributes[1].value == 'VIDEO') {
    62                                 modalHtml += "<video <video width='60%' height='90%' controls>";
     113                                modalHtml += "<video class='instagram-media' controls>";
    63114                                modalHtml += "<source src='"+imagepath+"'>";
    64115                                modalHtml += "</video>";
    65116                            } else {
    66                                     modalHtml += "<img src='"+imagepath+"'>";
     117                                modalHtml += "<img class='instagram-media' src='"+imagepath+"' alt='Instagram Image'>";
    67118                            }
    68119                            modalHtml += "</div>";
    69                             modalHtml += "<div class='carouselGallery-modal-text'>";
    70                             modalHtml += "<div class='insta_lightbox_header'>";
    71                             modalHtml += "<div class='insta_lightbox_header_content'>";
    72                             modalHtml += "<div class='insta_lightbox_avatar'><img src='<?php echo esc_url( IFGP_PLUGIN_URL . "img/instagram-gallery-premium.png" ); ?>' width='70%' height='100%'></div>";
    73                             modalHtml += "<div class='insta_lightbox_user_button'><div class='insta_lightbox_username'><a href='"+postURL+"'> "+username+"</a></div>";
    74                             modalHtml += "</div></div>";
    75                             modalHtml += "<div class='insta_lightbox_followbtn'><a target='_new' href='https://www.instagram.com/"+username+"' type='button' class='btn btn-primary'>Follow</a></div>";
    76                             modalHtml += "</div>";
    77                             modalHtml += "<div class='insta_lightbox_content_data'>";
    78                             modalHtml += "<p><a href='"+postURL+"' style='font-size:15px; margin:5px;'>"+username+"</a>";
    79                                     for(key in tags) {
     120                            modalHtml += "<div class='instagram-sidebar'>";
     121                            modalHtml += "<div class='instagram-header'>";
     122                            modalHtml += "<div class='instagram-user-info'>";
     123                            modalHtml += "<div class='instagram-avatar'>";
     124                            modalHtml += "<img src='<?php echo esc_attr( IFGP_PLUGIN_URL . "img/insta-icon.png" ); ?>' alt='User Avatar'>";
     125                            modalHtml += "</div>";
     126                            modalHtml += "<div class='instagram-username'>";
     127                            modalHtml += "<a href='"+postURL+"' target='_blank'>"+username+"</a>";
     128                            modalHtml += "</div>";
     129                            modalHtml += "</div>";
     130                            modalHtml += "<div class='instagram-follow-btn'>";
     131                            modalHtml += "<a href='https://www.instagram.com/"+username+"' target='_blank' class='instagram-follow-link'>Follow</a>";
     132                            modalHtml += "</div>";
     133                            modalHtml += "</div>";
     134                            modalHtml += "<div class='instagram-content'>";
     135                            modalHtml += "<div class='instagram-caption'>";
     136                            modalHtml += "<span class='instagram-username-caption'><a href='"+postURL+"' target='_blank'>"+username+"</a></span>";
     137                            modalHtml += "<span class='instagram-text'>";
     138                                    if(tags && tags.length > 0) {
     139                                        for(key in tags) {
    80140                                            if(tags.hasOwnProperty(key)) {
    81                                                 if (key != 0 ){
    82                                                 var value = tags[key];
    83                                                 modalHtml += "<span class='insta_tags'> <a href='https://www.instagram.com/explore/tags/"+value+"'> #"+value+"</a> </span>";
    84                                                 } 
    85                                                 else{
    86                                                 var value = tags[key];
    87                                                     modalHtml += ""+value+"";
     141                                                if (key != 0 && tags[key] && tags[key].trim() !== ''){
     142                                                    var value = tags[key].trim();
     143                                                    modalHtml += "<a href='https://www.instagram.com/explore/tags/"+value+"' target='_blank' class='instagram-hashtag'>#"+value+"</a> ";
     144                                                }
     145                                                else if(key == 0 && tags[key] && tags[key].trim() !== ''){
     146                                                    var value = tags[key].trim();
     147                                                    modalHtml += value + " ";
    88148                                                }
    89149                                            }
    90150                                        }
    91                             modalHtml += "</p></span>";
    92                             modalHtml += "</div>";
    93                             modalHtml += "<div class='insta_date_post'>";
    94                             modalHtml += "<div class='insta_social_icon'>";
    95                             modalHtml += "<a href='"+postURL+"'><span class='icons icon-heart'></span></a>";
    96                             modalHtml += "<a href='"+postURL+"'><svg class='comments' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='22px' height='22px' viewBox='796 796 200 200' enable-background='new 796 796 200 200' xml:space='preserve'><path d='M896.001,812.517c-55.23,0-100.001,31.369-100.001,70.071c0,18.018,9.72,34.439,25.67,46.851c3.721,2.895,5.446,7.685,4.424,12.286l-6.872,30.926c-0.498,2.242,0.419,4.561,2.316,5.855c1.896,1.295,4.391,1.304,6.297,0.022l36.909-24.804c3.238-2.176,7.17-3.074,11.032-2.516c6.532,0.945,13.294,1.448,20.226,1.448c55.227,0,99.999-31.37,99.999-70.069C996,843.886,951.229,812.517,896.001,812.517z'/></svg></a>";
    97                             modalHtml += "<a href='"+postURL+"'><svg class='share-alt2' version='1.1' id='svg2' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns#' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#' xmlns:svg='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' sodipodi:docname='share-alt.svg' inkscape:version='0.48.4 r9939'xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='22px' height='22px' viewBox='0 0 1200 1200' enable-background='new 0 0 1200 1200' xml:space='preserve'><path id='path20884' inkscape:connector-curvature='0' d='M754.553,35.03v294.208C487.317,329.246,0,332.178,0,1164.97c55.25-556.9,309.061-560.402,754.553-560.408v321.292L1200,480.407L754.553,35.03z'/></svg></a>";
    98                             modalHtml += "</div><div>"+imagedate+"</div></div>";
    99                             modalHtml += "</div></div></div></div></div>";
    100                             $('body').append(modalHtml).fadeIn(2500);
     151                                    }
     152                            modalHtml += "</span>";
     153                            modalHtml += "</div>";
     154                            modalHtml += "</div>";
     155                            modalHtml += "<div class='instagram-actions'>";
     156                            modalHtml += "<div class='instagram-action-buttons'>";
     157                            modalHtml += "<a href='"+postURL+"' target='_blank' class='instagram-action-btn'>";
     158                            modalHtml += "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>";
     159                            modalHtml += "</a>";
     160                            modalHtml += "<a href='"+postURL+"' target='_blank' class='instagram-action-btn'>";
     161                            modalHtml += "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>";
     162                            modalHtml += "</a>";
     163                            modalHtml += "<a href='"+postURL+"' target='_blank' class='instagram-action-btn'>";
     164                            modalHtml += "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><polyline points='16,6 12,2 8,6' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><line x1='12' y1='2' x2='12' y2='15' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>";
     165                            modalHtml += "</a>";
     166                            modalHtml += "</div>";
     167                            modalHtml += "<div class='instagram-date'>"+imagedate+"</div>";
     168                            modalHtml += "</div>";
     169                            modalHtml += "</div></div></div></div>";
     170                            $('body').append(modalHtml).addClass('instagram-lightbox-open');
    101171                        }
    102172                       
    103173                    }
    104174                   
    105                     // active scroll height
     175
    106176                    var insta_lightbox_content_data = jQuery('.insta_lightbox_content_data').height();
    107                     console.log(insta_lightbox_content_data);
     177                    //console.log(insta_lightbox_content_data);
    108178                    if (insta_lightbox_content_data > 400) {
    109179                        jQuery('.carouselGallery-modal-text').css('overflow-y','scroll');
    … …  
    113183             
    114184               
    115                 jQuery('body').on( 'click','.carouselGallery-wrapper', function(e) {
    116                     if(jQuery(e.target).hasClass('.carouselGallery-wrapper')){
     185
     186                jQuery('body').on('click', '.instagram-lightbox-overlay, .carouselGallery-wrapper', function(e) {
     187                    if(jQuery(e.target).hasClass('instagram-lightbox-overlay') || jQuery(e.target).hasClass('carouselGallery-wrapper')){
    117188                        removeModal();
    118189                    }
    119190                });
     191
     192
     193                jQuery('body').on('click', '.instagram-close-btn', function(e){
     194                    e.preventDefault();
     195                    e.stopPropagation();
     196                    removeModal();
     197                });
     198
     199
    120200                jQuery('body').on('click', '.carouselGallery-modal .iconscircle-cross', function(e){
     201                    e.preventDefault();
     202                    e.stopPropagation();
    121203                    removeModal();
    122204                });
    123205
     206
     207                jQuery('body').on('click', '.instagram-lightbox-modal, .carouselGallery-modal', function(e){
     208                    e.stopPropagation();
     209                });
     210
     211
     212                jQuery('body').on('dblclick', '.instagram-media', function(e){
     213                    e.preventDefault();
     214                    removeModal();
     215                });
     216
    124217                 var removeModal = function(){
    125                     jQuery('body').find('.carouselGallery-wrapper').remove();
    126                     jQuery('body').removeClass('noscroll');
     218
     219                    jQuery('.instagram-lightbox-modal, .carouselGallery-modal').addClass('closing');
     220
     221
     222                    setTimeout(function() {
     223                        jQuery('body').find('.carouselGallery-wrapper').fadeOut(200, function() {
     224                            jQuery(this).remove();
     225                        });
     226                    }, 200);
     227
     228                    jQuery('body').removeClass('noscroll instagram-lightbox-open');
    127229                    jQuery('body').css('position', 'static');
    128230                    jQuery('body').animate({scrollTop: scrollTo}, 0);
    129231                };
    130232
    131                 // Avoid break on small devices
     233
    132234                var carouselGalleryScrollMaxHeight = function() {
    133235                    if (jQuery('.carouselGallery-scrollbox').length) {
    … …  
    136238                    }
    137239                }
    138                 jQuery(window).resize(function() { // set event on resize
     240                jQuery(window).resize(function() {
    139241                    clearTimeout(this.id);
    140242                    this.id = setTimeout(carouselGalleryScrollMaxHeight, 100);

  • wp-instagram-feed-awplife/trunk/readme.txt

    r3374261 r3374967  
    55Requires at least: 4.0
    66Tested up to: 6.8.3
    7 Stable tag: 1.4.6
     7Stable tag: 1.4.7
    88License: GPLv2 or later
    99License URI: http://www.gnu.org/licenses/gpl-2.0.html
    … …  
    9191== Changelog ==
    9292
     93= 1.4.7 =
     94* Lightbox css update
     95
    9396= 1.4.6 =
    9497* Tested with WordPress 6.8.3

  • wp-instagram-feed-awplife/trunk/wp-instagram-feed-awplife.php

    r3344359 r3374967  
    55Plugin Name: Social Media Feed – Display Instagram Feed on WordPress
    66Description: Instagram Feed Gallery Plugin For WordPress allows you to fetch your Instagram feeds to your WordPress website.
    7 Version: 1.4.6
     7Version: 1.4.7
    88Author: A WP Life
    99Author URI: https://awplife.com/
    … …  
    2727        protected function _constants() {
    2828            //Plugin Version
    29             define( 'IFGP_PLUGIN_VER', '1.4.6' );
     29            define( 'IFGP_PLUGIN_VER', '1.4.7' );
    3030           
    3131            //Plugin Text Domain
Note: See TracChangeset for help on using the changeset viewer.