WordPress.org
Get WordPress

Plugin Directory

Changeset 3411083


Ignore:
Timestamp:
12/04/2025 02:44:43 PM (4 months ago)
Author:
wpcraftnet
Message:

update file

Location:
photoblocks-gallery/trunk/src/photo-gallery
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • photoblocks-gallery/trunk/src/photo-gallery/edit.js

    r3391515 r3411083  
    1 import { useBlockProps, BlockControls, MediaUpload, MediaUploadCheck, InspectorControls } from '@wordpress/block-editor';
    2 
    3 import { ToolbarGroup, ToolbarButton, Button, PanelBody, RangeControl, ToggleControl, SelectControl, TabPanel } from '@wordpress/components';
     1import {useBlockProps, BlockControls, MediaUpload, MediaUploadCheck,InspectorControls} from '@wordpress/block-editor';
     2
     3import { ToolbarGroup, ToolbarButton, Button, PanelBody, RangeControl, ToggleControl, SelectControl,} from '@wordpress/components';
    44
    55import { Fragment } from '@wordpress/element';
    … …  
    88export default function Edit({ attributes, setAttributes }) {
    99
    10   const {
    11     images = [],
    12     columns = 3,
    13     gap = 16,
    14     showCaptions = true,
    15     imageSize = 'full',
    16     customWidth = 0,
     10  const { 
     11    images = [], 
     12    columns = 3, 
     13    gap = 16, 
     14    showCaptions = true, 
     15    imageSize = 'full', 
     16    customWidth = 0, 
    1717    customHeight = 0,
    18     layoutType = 'grid',
    19     showPagination = false,
    20     itemsPerPage = 12,
     18    layoutType = 'grid', 
     19    showPagination = false, 
     20    itemsPerPage = 12, 
    2121    currentPage = 1,
     22    // Slideshow specific attributes
     23    autoPlay = true,
     24    autoPlaySpeed = 3000,
     25    showThumbnails = true,
     26    showNavigation = true,
     27    transitionEffect = 'slide',
     28    currentSlide = 0,
    2229    // Image Browser specific attributes
    2330    browserCurrentImage = 0,
    … …  
    2734    browserAutoFullscreen = false,
    2835    browserZoomEnabled = true,
    29     ImgbackgroundColor = '#000000',
    30     ImgCaptionColor = '#ffffff',
    31 
    3236    // Masonry specific attributes
    3337    masonryBorderRadius = 8,
    3438    masonryImageBorder = 0,
    3539    masonryImageBorderColor = '#e0e0e0',
    36     masonryImageBorderStyle = 'solid',
    37 
    38     // NEW STYLE ATTRIBUTES
    39     // Grid Style attributes
    40     gridBackgroundColor = '#000000',
    41     grindCaptionColor = '#ffffff',
    42     GtBgap = 0,
    43 
    44     // Lightbox Style attributes
    45     lightboxOverlayColor = 'rgba(0, 0, 0, 0.8)',
    46     lightboxIconColor = '#ffffff',
    47     lightboxHoverScale = 1.05,
    48 
    49     LightBackgroundColor = '#000000',
    50     LightCaptionColor = '#ffffff',
    51     LighttBgap = 0,
    52 
    53 
    54     // Masonry Style attributes (additional to existing)
    55     masonryHoverEffect = 'lift',
    56     masonryImageOpacity = 1,
    57 
     40    masonryImageBorderStyle = 'solid'
    5841  } = attributes;
    5942
    … …  
    6750        sizes: img.sizes || {},
    6851      })),
    69       currentPage: 1,
    70       currentSlide: 0,
    71       browserCurrentImage: 0
     52      currentPage: 1, // Reset to first page when images change
     53      currentSlide: 0, // Reset to first slide when images change
     54      browserCurrentImage: 0 // Reset to first image for browser
    7255    });
    7356  };
    … …  
    7659  const startIndex = (currentPage - 1) * itemsPerPage;
    7760  const endIndex = startIndex + itemsPerPage;
    78   const imagesToDisplay = showPagination ? images.slice(startIndex, endIndex) : images;
     61  const imagesToDisplay = showPagination ? images.slice(startIndex, endIndex): images;
    7962
    8063  // Calculate total pages for pagination
    8164  const totalPages = Math.ceil(images.length / itemsPerPage);
     65
     66  // Handle slideshow navigation
     67  const handleSlideChange = (slideIndex) => {
     68    setAttributes({ currentSlide: slideIndex });
     69  };
     70
     71  const nextSlide = () => {
     72    const nextIndex = (currentSlide + 1) % images.length;
     73    setAttributes({ currentSlide: nextIndex });
     74  };
     75
     76  const prevSlide = () => {
     77    const prevIndex = currentSlide === 0 ? images.length - 1 : currentSlide - 1;
     78    setAttributes({ currentSlide: prevIndex });
     79  };
    8280
    8381  // Handle image browser navigation
    … …  
    9896  return (
    9997    <Fragment>
     98
    10099      <BlockControls>
    101         <ToolbarGroup>
    102           <ToolbarButton
    103             icon="grid-view"
    104             isPressed={layoutType === 'grid'}
    105             onClick={() => setAttributes({ layoutType: 'grid' })}
     100                <ToolbarGroup>
     101                    <ToolbarButton
     102              icon="grid-view"
     103              isPressed={ layoutType === 'grid' }
     104              onClick={ () => setAttributes({ layoutType: 'grid' }) }
    106105          >
    107             {__('Grid', 'photoblocks-gallery')}
     106              { __( 'Grid', 'photoblocks-gallery' ) }
    108107          </ToolbarButton>
    109108
    110           <ToolbarButton
     109                    <ToolbarButton
    111110            icon="format-gallery"
    112             isPressed={layoutType === 'lightbox'}
    113             onClick={() => setAttributes({ layoutType: 'lightbox' })}
     111            isPressed={ layoutType === 'lightbox' }
     112            onClick={ () => setAttributes({ layoutType: 'lightbox' }) }
    114113          >
    115             {__('Lightbox', 'photoblocks-gallery')}
    116           </ToolbarButton>
    117 
    118           <ToolbarButton
     114            { __( 'Lightbox', 'photoblocks-gallery' ) }
     115        </ToolbarButton>
     116
     117        <ToolbarButton
     118            icon="slides"
     119            isPressed={ layoutType === 'slideshow' }
     120            onClick={ () => setAttributes({ layoutType: 'slideshow' }) }
     121          >
     122            { __( 'Slide Show', 'photoblocks-gallery' ) }
     123        </ToolbarButton>
     124
     125        <ToolbarButton
    119126            icon="schedule"
    120             isPressed={layoutType === 'masonry'}
    121             onClick={() => setAttributes({ layoutType: 'masonry' })}
     127            isPressed={ layoutType === 'masonry' }
     128            onClick={ () => setAttributes({ layoutType: 'masonry' }) }
    122129          >
    123             {__('Masonry', 'photoblocks-gallery')}
    124           </ToolbarButton>
    125 
    126           <ToolbarButton
     130            { __( 'Masonry', 'photoblocks-gallery' ) }
     131        </ToolbarButton>
     132
     133        <ToolbarButton
    127134            icon="cover-image"
    128             isPressed={layoutType === 'imagebrowser'}
    129             onClick={() => setAttributes({ layoutType: 'imagebrowser' })}
     135            isPressed={ layoutType === 'imagebrowser' }
     136            onClick={ () => setAttributes({ layoutType: 'imagebrowser' }) }
    130137          >
    131             {__('Image Browser', 'photoblocks-gallery')}
    132           </ToolbarButton>
    133 
    134           <ToolbarButton
    135             icon="cover-image"
    136             disabled={true}
    137           >
    138             {__('Infinite Carousel', 'photoblocks-gallery')}
    139             <span className="pro-badge">PRO</span>
    140           </ToolbarButton>
    141 
    142           <ToolbarButton
    143             icon="cover-image"
    144             disabled={true}
    145           >
    146             {__('Wave Gallery', 'photoblocks-gallery')}
    147             <span className="pro-badge">PRO</span>
    148           </ToolbarButton>
    149 
    150           <ToolbarButton
    151             icon="cover-image"
    152             disabled={true}
    153           >
    154             {__('Image Center', 'photoblocks-gallery')}
    155             <span className="pro-badge">PRO</span>
    156           </ToolbarButton>
    157 
    158         </ToolbarGroup>
    159       </BlockControls>
    160 
    161 
     138            { __( 'Image Browser', 'photoblocks-gallery' ) }
     139        </ToolbarButton>
     140
     141
     142                </ToolbarGroup>
     143            </BlockControls>
     144       
    162145      <InspectorControls>
    163 
    164         <div className="tab-content-settings">
    165           <PanelBody title={__('Layout & Display')} initialOpen={true}>
    166             <SelectControl
    167               label={__('Gallery Layout')}
    168               value={layoutType}
    169               options={[
    170                 { label: 'Grid Layout', value: 'grid' },
    171                 { label: 'Lightbox Layout', value: 'lightbox' },
    172                 { label: 'Image browser Layout', value: 'imagebrowser' },
    173                 { label: 'Masonry Layout', value: 'masonry' },
    174                 { label: 'Infinite Carousel (PRO 🔒)', value: 'infinite', disabled: true },
    175                 { label: 'Wave Gallery (PRO 🔒)', value: 'wave', disabled: true },
    176                 { label: 'Image Center (PRO 🔒)', value: 'center', disabled: true },
    177               ]}
    178               onChange={(value) => setAttributes({ layoutType: value })}
    179             />
    180 
    181             {layoutType !== 'slideshow' && layoutType !== 'imagebrowser' && (
     146        <PanelBody title={__('Gallery Settings')} initialOpen={true}>
     147          <SelectControl
     148            label={__('Gallery Layout')}
     149            value={layoutType}
     150            options={[
     151              { label: 'Grid Layout', value: 'grid' },
     152              { label: 'Slide Show Layout', value: 'slideshow' },
     153              { label: 'Lightbox Layout', value: 'lightbox' },
     154              { label: 'Image browser Layout', value: 'imagebrowser' },
     155              { label: 'Masonry Layout', value: 'masonry' },
     156             
     157            ]}
     158            onChange={(value) => setAttributes({ layoutType: value })}
     159          />
     160
     161          {layoutType !== 'slideshow' && layoutType !== 'imagebrowser' && (
     162            <RangeControl
     163              label={__('Images Per Row')}
     164              value={columns}
     165              onChange={(value) => setAttributes({ columns: value })}
     166              min={1}
     167              max={6}
     168            />
     169          )}
     170
     171          {layoutType !== 'imagebrowser' && (
     172            <RangeControl
     173              label={__('Space Between Images')}
     174              value={gap}
     175              onChange={(value) => setAttributes({ gap: value })}
     176              min={8}
     177              max={100}
     178            />
     179          )}
     180         
     181          <ToggleControl
     182            label={__('Show Captions')}
     183            checked={showCaptions}
     184            onChange={(value) => setAttributes({ showCaptions: value })}
     185          />
     186
     187          <SelectControl
     188            label={__('Image Size')}
     189            value={imageSize}
     190            options={[
     191              { label: 'Full Size', value: 'full' },
     192              { label: 'Large', value: 'large' },
     193              { label: 'Medium', value: 'medium' },
     194              { label: 'Thumbnail', value: 'thumbnail' },
     195              { label: 'Custom', value: 'custom' },
     196            ]}
     197            onChange={(value) => setAttributes({ imageSize: value })}
     198          />
     199
     200          {imageSize === 'custom' && (
     201            <>
    182202              <RangeControl
    183                 label={__('Images Per Row')}
    184                 value={columns}
    185                 onChange={(value) => setAttributes({ columns: value })}
    186                 min={1}
    187                 max={6}
     203                label={__('Custom Width (px)')}
     204                value={customWidth}
     205                onChange={(value) => setAttributes({ customWidth: value })}
     206                min={50}
     207                max={1200}
    188208              />
    189             )}
    190 
    191             {layoutType !== 'imagebrowser' && (
    192209              <RangeControl
    193                 label={__('Space Between Images')}
    194                 value={gap}
    195                 onChange={(value) => setAttributes({ gap: value })}
    196                 min={8}
    197                 max={100}
     210                label={__('Custom Height (px)')}
     211                value={customHeight}
     212                onChange={(value) => setAttributes({ customHeight: value })}
     213                min={50}
     214                max={1200}
    198215              />
    199             )}
    200 
    201             <ToggleControl
    202               label={__('Show Captions')}
    203               checked={showCaptions}
    204               onChange={(value) => setAttributes({ showCaptions: value })}
    205             />
    206 
    207             <SelectControl
    208               label={__('Image Size')}
    209               value={imageSize}
    210               options={[
    211                 { label: 'Full Size', value: 'full' },
    212                 { label: 'Large', value: 'large' },
    213                 { label: 'Medium', value: 'medium' },
    214                 { label: 'Thumbnail', value: 'thumbnail' },
    215                 { label: 'Custom', value: 'custom' },
    216               ]}
    217               onChange={(value) => setAttributes({ imageSize: value })}
    218             />
    219 
    220             {imageSize === 'custom' && (
    221               <>
    222                 <RangeControl
    223                   label={__('Custom Width (px)')}
    224                   value={customWidth}
    225                   onChange={(value) => setAttributes({ customWidth: value })}
    226                   min={50}
    227                   max={1200}
    228                 />
    229                 <RangeControl
    230                   label={__('Custom Height (px)')}
    231                   value={customHeight}
    232                   onChange={(value) => setAttributes({ customHeight: value })}
    233                   min={50}
    234                   max={1200}
    235                 />
    236               </>
    237             )}
    238 
    239             {(layoutType === 'grid' || layoutType === 'lightbox' || layoutType === 'masonry') && (
    240               <>
    241                 <ToggleControl
    242                   label={__('Pagination Show')}
    243                   checked={showPagination}
    244                   onChange={(value) => setAttributes({ showPagination: value, currentPage: 1 })}
    245                 />
    246 
    247                 {showPagination && (
    248                   <SelectControl
    249                     label={__('Items Per Page')}
    250                     value={itemsPerPage}
    251                     options={[
    252                       { label: '4', value: 4 },
    253                       { label: '8', value: 8 },
    254                       { label: '12', value: 12 },
    255                       { label: '16', value: 16 },
    256                       { label: '20', value: 20 },
    257                     ]}
    258                     onChange={(value) =>
    259                       setAttributes({ itemsPerPage: parseInt(value, 10), currentPage: 1 })
    260                     }
    261                   />
    262                 )}
    263               </>
    264             )}
    265           </PanelBody>
    266 
    267           {layoutType === 'slideshow' && (
    268             <PanelBody title={__('Slideshow Settings')} initialOpen={true}>
     216            </>
     217          )}
     218
     219          {(layoutType === 'grid' || layoutType === 'lightbox' || layoutType === 'masonry') && (
     220            <>
    269221              <ToggleControl
    270                 label={__('Auto Play')}
    271                 checked={autoPlay}
    272                 onChange={(value) => setAttributes({ autoPlay: value })}
     222                label={__('Pagination Show')}
     223                checked={showPagination}
     224                onChange={(value) => setAttributes({ showPagination: value, currentPage: 1 })}
    273225              />
    274226
    275               {autoPlay && (
    276                 <RangeControl
    277                   label={__('Auto Play Speed (ms)')}
    278                   value={autoPlaySpeed}
    279                   onChange={(value) => setAttributes({ autoPlaySpeed: value })}
    280                   min={1000}
    281                   max={10000}
    282                   step={500}
     227              {showPagination && (
     228                <SelectControl
     229                  label={__('Items Per Page')}
     230                  value={itemsPerPage}
     231                  options={[
     232                    { label: '4', value: 4 },
     233                    { label: '8', value: 8 },
     234                    { label: '12', value: 12 },
     235                    { label: '16', value: 16 },
     236                    { label: '20', value: 20 },
     237                  ]}
     238                  onChange={(value) =>
     239                    setAttributes({ itemsPerPage: parseInt(value, 10), currentPage: 1 })
     240                  }
    283241                />
    284242              )}
    285 
    286               <ToggleControl
    287                 label={__('Show Thumbnails')}
    288                 checked={showThumbnails}
    289                 onChange={(value) => setAttributes({ showThumbnails: value })}
     243            </>
     244          )}
     245        </PanelBody>
     246
     247        {layoutType === 'slideshow' && (
     248          <PanelBody title={__('Slideshow Settings')} initialOpen={true}>
     249            <ToggleControl
     250              label={__('Auto Play')}
     251              checked={autoPlay}
     252              onChange={(value) => setAttributes({ autoPlay: value })}
     253            />
     254           
     255            {autoPlay && (
     256              <RangeControl
     257                label={__('Auto Play Speed (ms)')}
     258                value={autoPlaySpeed}
     259                onChange={(value) => setAttributes({ autoPlaySpeed: value })}
     260                min={1000}
     261                max={10000}
     262                step={500}
    290263              />
    291 
    292               <ToggleControl
    293                 label={__('Show Navigation')}
    294                 checked={showNavigation}
    295                 onChange={(value) => setAttributes({ showNavigation: value })}
    296               />
    297 
    298               <SelectControl
    299                 label={__('Transition Effect')}
    300                 value={transitionEffect}
    301                 options={[
    302                   { label: 'Slide', value: 'slide' },
    303                   { label: 'Fade', value: 'fade' },
    304                   { label: 'Zoom', value: 'zoom' },
    305                 ]}
    306                 onChange={(value) => setAttributes({ transitionEffect: value })}
    307               />
    308             </PanelBody>
    309           )}
    310 
    311           {layoutType === 'imagebrowser' && (
    312             <PanelBody title={__('Image Browser Settings')} initialOpen={true}>
    313               <ToggleControl
    314                 label={__('Show Thumbnails')}
    315                 checked={browserShowThumbnails}
    316                 onChange={(value) => setAttributes({ browserShowThumbnails: value })}
    317               />
    318 
    319               <ToggleControl
    320                 label={__('Show Navigation Arrows')}
    321                 checked={browserShowNavigation}
    322                 onChange={(value) => setAttributes({ browserShowNavigation: value })}
    323               />
    324 
    325               <ToggleControl
    326                 label={__('Show Image Counter')}
    327                 checked={browserShowCounter}
    328                 onChange={(value) => setAttributes({ browserShowCounter: value })}
    329               />
    330 
    331               <ToggleControl
    332                 label={__('Enable Zoom & Pan')}
    333                 checked={browserZoomEnabled}
    334                 onChange={(value) => setAttributes({ browserZoomEnabled: value })}
    335               />
    336 
    337               <ToggleControl
    338                 label={__('Auto Fullscreen Mode')}
    339                 checked={browserAutoFullscreen}
    340                 onChange={(value) => setAttributes({ browserAutoFullscreen: value })}
    341               />
    342             </PanelBody>
    343           )}
    344         </div>
    345 
    346       </InspectorControls>
    347 
    348 
    349 
    350       <InspectorControls group='styles'>
    351 
    352         <div className="tab-content-styles">
    353           <PanelBody title={__('Appearance')} initialOpen={true}>
    354             {/* Grid Layout Styles */}
    355             {layoutType === 'grid' && (
     264            )}
     265           
     266            <ToggleControl
     267              label={__('Show Thumbnails')}
     268              checked={showThumbnails}
     269              onChange={(value) => setAttributes({ showThumbnails: value })}
     270            />
     271           
     272            <ToggleControl
     273              label={__('Show Navigation')}
     274              checked={showNavigation}
     275              onChange={(value) => setAttributes({ showNavigation: value })}
     276            />
     277           
     278            <SelectControl
     279              label={__('Transition Effect')}
     280              value={transitionEffect}
     281              options={[
     282                { label: 'Slide', value: 'slide' },
     283                { label: 'Fade', value: 'fade' },
     284                { label: 'Zoom', value: 'zoom' },
     285              ]}
     286              onChange={(value) => setAttributes({ transitionEffect: value })}
     287            />
     288          </PanelBody>
     289        )}
     290
     291        {layoutType === 'imagebrowser' && (
     292          <PanelBody title={__('Image Browser Settings')} initialOpen={true}>
     293            <ToggleControl
     294              label={__('Show Thumbnails')}
     295              checked={browserShowThumbnails}
     296              onChange={(value) => setAttributes({ browserShowThumbnails: value })}
     297            />
     298           
     299            <ToggleControl
     300              label={__('Show Navigation Arrows')}
     301              checked={browserShowNavigation}
     302              onChange={(value) => setAttributes({ browserShowNavigation: value })}
     303            />
     304           
     305            <ToggleControl
     306              label={__('Show Image Counter')}
     307              checked={browserShowCounter}
     308              onChange={(value) => setAttributes({ browserShowCounter: value })}
     309            />
     310           
     311            <ToggleControl
     312              label={__('Enable Zoom & Pan')}
     313              checked={browserZoomEnabled}
     314              onChange={(value) => setAttributes({ browserZoomEnabled: value })}
     315            />
     316
     317            <ToggleControl
     318              label={__('Auto Fullscreen Mode')}
     319              checked={browserAutoFullscreen}
     320              onChange={(value) => setAttributes({ browserAutoFullscreen: value })}
     321            />
     322          </PanelBody>
     323        )}
     324
     325        {layoutType === 'masonry' && (
     326          <PanelBody title={__('Masonry Settings')} initialOpen={true}>
     327            <RangeControl
     328              label={__('Border Radius (px)')}
     329              value={masonryBorderRadius}
     330              onChange={(value) => setAttributes({ masonryBorderRadius: value })}
     331              min={0}
     332              max={50}
     333            />
     334           
     335            <RangeControl
     336              label={__('Image Border Width (px)')}
     337              value={masonryImageBorder}
     338              onChange={(value) => setAttributes({ masonryImageBorder: value })}
     339              min={0}
     340              max={20}
     341            />
     342           
     343            {masonryImageBorder > 0 && (
    356344              <>
     345                <SelectControl
     346                  label={__('Border Style')}
     347                  value={masonryImageBorderStyle}
     348                  options={[
     349                    { label: 'Solid', value: 'solid' },
     350                    { label: 'Dashed', value: 'dashed' },
     351                    { label: 'Dotted', value: 'dotted' },
     352                    { label: 'Double', value: 'double' },
     353                  ]}
     354                  onChange={(value) => setAttributes({ masonryImageBorderStyle: value })}
     355                />
    357356                <div style={{ marginBottom: '16px' }}>
    358357                  <label style={{ display: 'block', marginBottom: '4px', fontSize: '11px', fontWeight: '500', textTransform: 'uppercase' }}>
    359                     {__('Background Color')}
     358                    {__('Border Color')}
    360359                  </label>
    361360                  <input
    362361                    type="color"
    363                     value={gridBackgroundColor}
    364                     onChange={(e) => setAttributes({ gridBackgroundColor: e.target.value })}
    365                     style={{ width: '100%', height: '32px', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
    366                   />
    367                 </div>
    368 
    369                 <div style={{ marginBottom: '16px' }}>
    370                   <label style={{ display: 'block', marginBottom: '4px', fontSize: '11px', fontWeight: '500', textTransform: 'uppercase' }}>
    371                     {__('Text Color')}
    372                   </label>
    373                   <input
    374                     type="color"
    375                     value={grindCaptionColor}
    376                     onChange={(e) => setAttributes({ grindCaptionColor: e.target.value })}
    377                     style={{ width: '100%', height: '32px', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
    378                   />
    379                 </div>
    380 
    381                 <div style={{ marginBottom: '16px' }}>
    382                   <label style={{ display: 'block', marginBottom: '4px', fontSize: '11px', fontWeight: '500', textTransform: 'uppercase' }}>
    383                     {__('padding')}
    384                   </label>
    385                   <RangeControl
    386                     label={__('Top Bottom Padding (px)')}
    387                     value={GtBgap}
    388                     onChange={(value) => setAttributes({ GtBgap: value })}
    389                     min={0}
    390                     max={100}
    391                   />
    392                 </div>
    393               </>
    394             )}
    395 
    396             {/* Lightbox Layout Styles */}
    397             {layoutType === 'lightbox' && (
    398               <>
    399                 <div style={{ marginBottom: '16px' }}>
    400                   <label style={{ display: 'block', marginBottom: '4px', fontSize: '11px', fontWeight: '500', textTransform: 'uppercase' }}>
    401                     {__('Background Color')}
    402                   </label>
    403                   <input
    404                     type="color"
    405                     value={LightBackgroundColor}
    406                     onChange={(e) => setAttributes({ LightBackgroundColor: e.target.value })}
    407                     style={{ width: '100%', height: '32px', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
    408                   />
    409                 </div>
    410 
    411                 <div style={{ marginBottom: '16px' }}>
    412                   <label style={{ display: 'block', marginBottom: '4px', fontSize: '11px', fontWeight: '500', textTransform: 'uppercase' }}>
    413                     {__('Text Color')}
    414                   </label>
    415                   <input
    416                     type="color"
    417                     value={LightCaptionColor}
    418                     onChange={(e) => setAttributes({ LightCaptionColor: e.target.value })}
    419                     style={{ width: '100%', height: '32px', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
    420                   />
    421                 </div>
    422 
    423                 <div style={{ marginBottom: '16px' }}>
    424                   <label style={{ display: 'block', marginBottom: '4px', fontSize: '11px', fontWeight: '500', textTransform: 'uppercase' }}>
    425                     {__('padding')}
    426                   </label>
    427                   <RangeControl
    428                     label={__('Top Bottom Padding (px)')}
    429                     value={LighttBgap}
    430                     onChange={(value) => setAttributes({ LighttBgap: value })}
    431                     min={0}
    432                     max={100}
    433                   />
    434                 </div>
    435               </>
    436             )}
    437 
    438             {/* Masonry Layout Styles */}
    439             {layoutType === 'masonry' && (
    440               <>
    441 
    442                 <RangeControl
    443                   label={__('Border Radius (px)')}
    444                   value={masonryBorderRadius}
    445                   onChange={(value) => setAttributes({ masonryBorderRadius: value })}
    446                   min={0}
    447                   max={50}
    448                 />
    449 
    450                 <RangeControl
    451                   label={__('Image Border Width (px)')}
    452                   value={masonryImageBorder}
    453                   onChange={(value) => setAttributes({ masonryImageBorder: value })}
    454                   min={0}
    455                   max={20}
    456                 />
    457 
    458                 {masonryImageBorder > 0 && (
    459                   <>
    460                     <SelectControl
    461                       label={__('Border Style')}
    462                       value={masonryImageBorderStyle}
    463                       options={[
    464                         { label: 'Solid', value: 'solid' },
    465                         { label: 'Dashed', value: 'dashed' },
    466                         { label: 'Dotted', value: 'dotted' },
    467                         { label: 'Double', value: 'double' },
    468                       ]}
    469                       onChange={(value) => setAttributes({ masonryImageBorderStyle: value })}
    470                     />
    471                     <div style={{ marginBottom: '16px' }}>
    472                       <label style={{ display: 'block', marginBottom: '4px', fontSize: '11px', fontWeight: '500', textTransform: 'uppercase' }}>
    473                         {__('Border Color')}
    474                       </label>
    475                       <input
    476                         type="color"
    477                         value={masonryImageBorderColor}
    478                         onChange={(e) => setAttributes({ masonryImageBorderColor: e.target.value })}
    479                         style={{ width: '100%', height: '32px', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
    480                       />
    481                     </div>
    482                   </>
    483                 )}
    484 
    485 
    486               </>
    487             )}
    488 
    489             {/* Image Browser Layout Styles */}
    490             {layoutType === 'imagebrowser' && (
    491               <>
    492                 <div style={{ marginBottom: '16px' }}>
    493                   <label style={{ display: 'block', marginBottom: '4px', fontSize: '11px', fontWeight: '500', textTransform: 'uppercase' }}>
    494                     {__('Background Color')}
    495                   </label>
    496                   <input
    497                     type="color"
    498                     value={ImgbackgroundColor}
    499                     onChange={(e) => setAttributes({ ImgbackgroundColor: e.target.value })}
    500                     style={{ width: '100%', height: '32px', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
    501                   />
    502                 </div>
    503 
    504                 <div style={{ marginBottom: '16px' }}>
    505                   <label style={{ display: 'block', marginBottom: '4px', fontSize: '11px', fontWeight: '500', textTransform: 'uppercase' }}>
    506                     {__('Caption Color')}
    507                   </label>
    508                   <input
    509                     type="color"
    510                     value={ImgCaptionColor}
    511                     onChange={(e) => setAttributes({ ImgCaptionColor: e.target.value })}
     362                    value={masonryImageBorderColor}
     363                    onChange={(e) => setAttributes({ masonryImageBorderColor: e.target.value })}
    512364                    style={{ width: '100%', height: '32px', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
    513365                  />
    … …  
    516368            )}
    517369          </PanelBody>
    518         </div>
     370        )}
    519371      </InspectorControls>
    520372
    521 
     373     
    522374      {/*
    523375       =========== Gallery Preview ==========
    … …  
    540392            />
    541393          </MediaUploadCheck>
    542         ) : (
     394        ) : (   
    543395          <Fragment>
    544396            {layoutType === 'grid' && (
    … …  
    550402                  <div key={img.id} className="wpct_gallery__item">
    551403                    <img
    552                       src={imageSize === 'custom' ? img.url : img.sizes?.[imageSize]?.url || img.url} alt={img.alt}
    553                       style={imageSize === 'custom' ? {
    554                         width: customWidth ? `${customWidth}px` : 'auto',
    555                         height: customHeight ? `${customHeight}px` : 'auto',
    556                       } : undefined
    557                       }
     404                        src={ imageSize === 'custom' ? img.url : img.sizes?.[imageSize]?.url || img.url} alt={img.alt}
     405                        style={ imageSize === 'custom' ? { width: customWidth ? `${customWidth}px` : 'auto',
     406                          height: customHeight ? `${customHeight}px` : 'auto',} : undefined
     407                        }
    558408                    />
    559409                    {showCaptions && img.caption && (
    560                       <figcaption style={{
    561                         backgroundColor: gridBackgroundColor,
    562                         color: grindCaptionColor,
    563                         paddingTop: GtBgap,
    564                         paddingBottom: GtBgap
    565                       }}> {img.caption}</figcaption>
     410                      <figcaption>{img.caption}</figcaption>
    566411                    )}
    567412                  </div>
    … …  
    573418              <div
    574419                className="wpct_gallery__lightbox-grid"
    575                 style={{
    576                   '--columns': columns,
    577                   '--gap': `${gap}px`,
    578                   '--lightbox-overlay': lightboxOverlayColor,
    579                   '--lightbox-icon-color': lightboxIconColor,
    580                   '--lightbox-hover-scale': lightboxHoverScale
    581                 }}
     420                style={{ '--columns': columns, '--gap': `${gap}px` }}
    582421              >
    583422                {imagesToDisplay.map((img) => (
    … …  
    585424                    <div className="wpct_gallery__lightbox-thumb">
    586425                      <img
    587                         src={imageSize === 'custom' ? img.url : img.sizes?.[imageSize]?.url || img.url} alt={img.alt}
    588                         style={imageSize === 'custom' ? {
    589                           width: customWidth ? `${customWidth}px` : 'auto',
    590                           height: customHeight ? `${customHeight}px` : 'auto',
    591                         } : undefined
    592                         }
     426                          src={ imageSize === 'custom' ? img.url : img.sizes?.[imageSize]?.url || img.url} alt={img.alt}
     427                          style={ imageSize === 'custom' ? { width: customWidth ? `${customWidth}px` : 'auto',
     428                            height: customHeight ? `${customHeight}px` : 'auto',} : undefined
     429                          }
    593430                      />
    594431                      <div className="wpct_gallery__lightbox-overlay">
    … …  
    597434                    </div>
    598435                    {showCaptions && img.caption && (
    599                       <figcaption style={{
    600                         backgroundColor: LightBackgroundColor,
    601                         color: LightCaptionColor,
    602                         paddingTop: LighttBgap,
    603                         paddingBottom: LighttBgap
    604                       }}>{img.caption}</figcaption>
     436                      <figcaption>{img.caption}</figcaption>
    605437                    )}
    606438                  </div>
    … …  
    612444              <div
    613445                className="wpct_gallery__masonry"
    614                 style={{
    615                   '--columns': columns,
     446                style={{ 
     447                  '--columns': columns, 
    616448                  '--gap': `${gap}px`,
    617449                  '--border-radius': `${masonryBorderRadius}px`,
    618450                  '--border-width': `${masonryImageBorder}px`,
    619451                  '--border-color': masonryImageBorderColor,
    620                   '--border-style': masonryImageBorderStyle,
    621                   '--masonry-hover-effect': masonryHoverEffect,
    622                   '--masonry-opacity': masonryImageOpacity
     452                  '--border-style': masonryImageBorderStyle
    623453                }}
    624454              >
    … …  
    626456                  <div key={img.id} className="wpct_gallery__masonry-item">
    627457                    <img
    628                       src={imageSize === 'custom' ? img.url : img.sizes?.[imageSize]?.url || img.url}
    629                       alt={img.alt}
    630                       style={imageSize === 'custom' ? {
    631                         width: customWidth ? `${customWidth}px` : 'auto',
    632                         height: customHeight ? `${customHeight}px` : 'auto',
    633                       } : undefined}
     458                        src={ imageSize === 'custom' ? img.url : img.sizes?.[imageSize]?.url || img.url}
     459                        alt={img.alt}
     460                        style={ imageSize === 'custom' ? {
     461                          width: customWidth ? `${customWidth}px` : 'auto',
     462                          height: customHeight ? `${customHeight}px` : 'auto',
     463                        } : undefined}
    634464                    />
    635465                    {showCaptions && img.caption && (
    … …  
    640470              </div>
    641471            )}
    642             {layoutType === 'imagebrowser' && (
    643               <div className="wpct_gallery__imagebrowser">
    644                 {/* Image Browser Main Container */}
    645                 <div className="wpct_gallery__imagebrowser-main">
    646                   <div className="wpct_gallery__imagebrowser-viewer">
     472
     473            {layoutType === 'slideshow' && (
     474              <div className="wpct_gallery__slideshow">
     475                {/* Main Slideshow Container */}
     476                <div className="wpct_gallery__slideshow-main">
     477                  <div className="wpct_gallery__slideshow-container">
    647478                    {images.map((img, index) => (
    648                       <div
    649                         key={img.id}
    650                         className={`wpct_gallery__browser-image ${index === browserCurrentImage ? 'active' : ''}`}
    651                         style={{ display: index === browserCurrentImage ? 'block' : 'none' }}
     479                      <div 
     480                        key={img.id} 
     481                        className={`wpct_gallery__slide ${index === currentSlide ? 'active' : ''}`}
     482                        style={{ display: index === currentSlide ? 'block' : 'none' }}
    652483                      >
    653484                        <img
    … …  
    660491                        />
    661492                        {showCaptions && img.caption && (
    662                           <div className="wpct_gallery__imagebrowser-caption"
    663                             style={{
    664                               backgroundColor: ImgbackgroundColor,
    665                               color: ImgCaptionColor
    666                             }}>
     493                          <div className="wpct_gallery__slideshow-caption">
    667494                            {img.caption}
    668495                          </div>
    … …  
    671498                    ))}
    672499                  </div>
    673 
     500                 
    674501                  {/* Navigation Controls */}
    675                   {browserShowNavigation && images.length > 1 && (
     502                  {showNavigation && images.length > 1 && (
    676503                    <>
    677                       <Button
    678                         className="wpct_gallery__imagebrowser-prev"
    679                         onClick={prevBrowserImage}
     504                      <Button 
     505                        className="wpct_gallery__slideshow-prev"
     506                        onClick={prevSlide}
    680507                        variant="secondary"
    681508                      >
    682509                        ❮
    683510                      </Button>
    684                       <Button
    685                         className="wpct_gallery__imagebrowser-next"
    686                         onClick={nextBrowserImage}
     511                      <Button 
     512                        className="wpct_gallery__slideshow-next"
     513                        onClick={nextSlide}
    687514                        variant="secondary"
    688515                      >
    … …  
    691518                    </>
    692519                  )}
    693 
     520                 
     521                  {/* Slide Counter */}
     522                  <div className="wpct_gallery__slideshow-counter">
     523                    {currentSlide + 1} / {images.length}
     524                  </div>
     525                </div>
     526               
     527                {/* Thumbnails */}
     528                {showThumbnails && images.length > 1 && (
     529                  <div className="wpct_gallery__slideshow-thumbnails" style={{ '--gap': `${gap}px` }}>
     530                    {images.map((img, index) => (
     531                      <div
     532                        key={img.id}
     533                        className={`wpct_gallery__slideshow-thumb ${index === currentSlide ? 'active' : ''}`}
     534                        onClick={() => handleSlideChange(index)}
     535                      >
     536                        <img
     537                          src={img.sizes?.thumbnail?.url || img.url}
     538                          alt={img.alt}
     539                        />
     540                      </div>
     541                    ))}
     542                  </div>
     543                )}
     544
     545                {/* Play/Pause Controls */}
     546                <div className="wpct_gallery__slideshow-controls">
     547                  <Button variant="secondary">
     548                    {autoPlay ? '⏸️ Pause' : '▶️ Play'}
     549                  </Button>
     550                </div>
     551              </div>
     552            )}
     553
     554            {layoutType === 'imagebrowser' && (
     555              <div className="wpct_gallery__imagebrowser">
     556                {/* Image Browser Main Container */}
     557                <div className="wpct_gallery__imagebrowser-main">
     558                  <div className="wpct_gallery__imagebrowser-viewer">
     559                    {images.map((img, index) => (
     560                      <div
     561                        key={img.id}
     562                        className={`wpct_gallery__browser-image ${index === browserCurrentImage ? 'active' : ''}`}
     563                        style={{ display: index === browserCurrentImage ? 'block' : 'none' }}
     564                      >
     565                        <img
     566                          src={imageSize === 'custom' ? img.url : img.sizes?.[imageSize]?.url || img.url}
     567                          alt={img.alt}
     568                          style={imageSize === 'custom' ? {
     569                            width: customWidth ? `${customWidth}px` : 'auto',
     570                            height: customHeight ? `${customHeight}px` : 'auto',
     571                          } : undefined}
     572                        />
     573                        {showCaptions && img.caption && (
     574                          <div className="wpct_gallery__imagebrowser-caption">
     575                            {img.caption}
     576                          </div>
     577                        )}
     578                      </div>
     579                    ))}
     580                  </div>
     581                 
     582                  {/* Navigation Controls */}
     583                  {browserShowNavigation && images.length > 1 && (
     584                    <>
     585                      <Button
     586                        className="wpct_gallery__imagebrowser-prev"
     587                        onClick={prevBrowserImage}
     588                        variant="secondary"
     589                      >
     590                        ❮
     591                      </Button>
     592                      <Button
     593                        className="wpct_gallery__imagebrowser-next"
     594                        onClick={nextBrowserImage}
     595                        variant="secondary"
     596                      >
     597                        ❯
     598                      </Button>
     599                    </>
     600                  )}
     601                 
    694602                  {/* Image Counter */}
    695603                  {browserShowCounter && (
    … …  
    721629                  </div>
    722630                </div>
    723 
     631               
    724632                {/* Thumbnails */}
    725633                {browserShowThumbnails && images.length > 1 && (
    726634                  <div className="wpct_gallery__imagebrowser-thumbnails">
    727635                    {images.map((img, index) => (
    728                       <div
     636                      <div 
    729637                        key={img.id}
    730638                        className={`wpct_gallery__imagebrowser-thumb ${index === browserCurrentImage ? 'active' : ''}`}

  • photoblocks-gallery/trunk/src/photo-gallery/editor.css

    r3390095 r3411083  
    195195  margin-top: 0.5em;
    196196}
     197
     198/* Slideshow Layout - Editor Styles */
     199.wpct_gallery__slideshow {
     200  position: relative;
     201  width: 100%;
     202  max-width: 100%;
     203  margin: 0 auto;
     204  background: #f9f9f9;
     205  border-radius: 12px;
     206  overflow: hidden;
     207  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
     208}
     209
     210.wpct_gallery__slideshow-main {
     211  position: relative;
     212  width: 100%;
     213  background: #fff;
     214}
     215
     216.wpct_gallery__slideshow-container {
     217  position: relative;
     218  width: 100%;
     219  height: 400px; /* Slightly smaller for editor */
     220  overflow: hidden;
     221  background: #000;
     222}
     223
    197224.wpct_gallery__slide {
    198225  position: absolute;
    … …  
    449476  left: 20px;
    450477  right: 20px;
     478  background: rgba(0, 0, 0, 0.8);
    451479  color: white;
    452480  padding: 12px 20px;
    … …  
    671699}
    672700
     701/* Editor-specific slideshow adjustments */
     702.block-editor-block-list__layout .wpct_gallery__slideshow {
     703  margin-bottom: 1em;
     704}
     705
     706.block-editor-block-list__layout .wpct_gallery__slideshow-container {
     707  min-height: 300px; /* Ensure minimum height in editor */
     708}
     709
    673710/* Editor-specific image browser adjustments */
    674711.block-editor-block-list__layout .wpct_gallery__imagebrowser {
    … …  
    687724/* Responsive adjustments for editor */
    688725@media (max-width: 768px) {
     726  .wpct_gallery__slideshow-container {
     727    height: 300px;
     728  }
     729 
     730  .wpct_gallery__slideshow-prev,
     731  .wpct_gallery__slideshow-next {
     732    width: 35px;
     733    height: 35px;
     734    font-size: 14px;
     735  }
     736 
     737  .wpct_gallery__slideshow-controls .components-button {
     738    width: 35px !important;
     739    height: 35px !important;
     740    min-width: 35px !important;
     741    font-size: 12px !important;
     742  }
     743 
     744  .wpct_gallery__slideshow-counter {
     745    padding: 4px 8px;
     746    font-size: 0.75em;
     747  }
     748 
     749  .wpct_gallery__slideshow-thumb {
     750    width: 50px;
     751    height: 38px;
     752  }
     753 
     754  .wpct_gallery__slideshow-caption {
     755    padding: 1em 0.8em 0.8em;
     756    font-size: 0.9em;
     757  }
     758
    689759  /* Image Browser Mobile - Editor */
    690760  .wpct_gallery__imagebrowser-viewer {
    … …  
    752822  }
    753823}
    754 
    755 .pro-badge {
    756   background: #ff4757;
    757   color: #fff;
    758   font-size: 10px;
    759   font-weight: bold;
    760   padding: 2px 4px;
    761   border-radius: 3px;
    762   margin-left: 6px;
    763   vertical-align: middle;
    764 }

  • photoblocks-gallery/trunk/src/photo-gallery/save.js

    r3390095 r3411083  
    1313    showPagination = false,
    1414    itemsPerPage = 12,
    15 
    16    //Grid layout
    17     gridBackgroundColor = '#000000',
    18     grindCaptionColor = '#ffffff',
    19     GtBgap = 0,
    20 
    21     // Lightbox specific attributes
    22     LightBackgroundColor = '#000000',
    23     LightCaptionColor = '#ffffff',
    24     LighttBgap = 0,
    25 
     15    // Slideshow attributes
     16    autoPlay = true,
     17    autoPlaySpeed = 3000,
     18    showThumbnails = true,
     19    showNavigation = true,
     20    transitionEffect = 'slide',
    2621    // Image Browser attributes
    2722    browserShowThumbnails = true,
    … …  
    3025    browserAutoFullscreen = false,
    3126    browserZoomEnabled = true,
    32     ImgbackgroundColor = '#000000',
    33     ImgCaptionColor = '#ffffff',
    34 
    3527    // Masonry specific attributes
    3628    masonryBorderRadius = 8,
    … …  
    6759            gap: `${gap}px`
    6860          }}
    69           data-bg-color={gridBackgroundColor}
    70           data-caption-color={grindCaptionColor}
    7161          data-columns={columns}
    7262          data-gap={gap}
    … …  
    8979              <figure
    9080                key={img.id || index}
    91                 className="wpc-gallery__item"
     81                className="my-gallery__item"
    9282                data-image-id={img.id || index}
    9383              >
    … …  
    9787                  style={Object.keys(imageStyles).length > 0 ? imageStyles : undefined}
    9888                />
    99                  {showCaptions && img.caption && (
    100                       <figcaption style={{
    101                             backgroundColor: gridBackgroundColor,
    102                             color: grindCaptionColor,
    103                             paddingTop:GtBgap,
    104                             paddingBottom:GtBgap }}> {img.caption} </figcaption>
     89                {showCaptions && img.caption && (
     90                  <figcaption dangerouslySetInnerHTML={{ __html: img.caption }} />
    10591                )}
    10692              </figure>
    … …  
    120106      </div>
    121107    );
    122    
    123108  } else if (layoutType === 'lightbox') {
    124109    return (
    … …  
    131116            display: 'grid',
    132117            gridTemplateColumns: `repeat(${columns}, 1fr)`,
    133             gap: `${gap}px`,
    134            
     118            gap: `${gap}px`
    135119          }}
    136120          data-layout="lightbox"
    … …  
    176160                  </div>
    177161                  {showCaptions && img.caption && (
    178                    
    179                      <figcaption style={{
    180                             backgroundColor: LightBackgroundColor,
    181                             color: LightCaptionColor,
    182                             paddingTop:LighttBgap,
    183                             paddingBottom:LighttBgap }}> {img.caption} </figcaption>
     162                    <figcaption dangerouslySetInnerHTML={{ __html: img.caption }} />
    184163                  )}
    185164              </figure>
    … …  
    209188      </div>
    210189    );
     190  } else if (layoutType === 'slideshow') {
     191    return (
     192      <div {...blockProps}>
     193        <div
     194          className="my-gallery__slideshow"
     195          data-layout="slideshow"
     196          data-auto-play={autoPlay ? 'true' : 'false'}
     197          data-auto-play-speed={autoPlaySpeed}
     198          data-show-thumbnails={showThumbnails ? 'true' : 'false'}
     199          data-show-navigation={showNavigation ? 'true' : 'false'}
     200          data-transition-effect={transitionEffect}
     201          data-show-captions={showCaptions ? 'true' : 'false'}
     202          data-total-slides={images.length}
     203        >
     204          {/* Main Slideshow Container */}
     205          <div className="my-gallery__slideshow-main">
     206            <div className="my-gallery__slideshow-container">
     207              {images.map((img, index) => {
     208                const imageUrl = imageSize === 'custom'
     209                  ? img.url
     210                  : (img.sizes && img.sizes[imageSize] && img.sizes[imageSize].url) || img.url;
     211               
     212                const imageStyles = imageSize === 'custom' && (customWidth || customHeight)
     213                  ? {
     214                      width: customWidth ? `${customWidth}px` : 'auto',
     215                      height: customHeight ? `${customHeight}px` : 'auto',
     216                    }
     217                  : {};
     218
     219                return (
     220                  <div
     221                    key={img.id || index}
     222                    className={`my-gallery__slide ${index === 0 ? 'active' : ''}`}
     223                    data-slide-index={index}
     224                    data-image-id={img.id || index}
     225                  >
     226                    <img
     227                      src={imageUrl}
     228                      alt={img.alt || ''}
     229                      style={Object.keys(imageStyles).length > 0 ? imageStyles : undefined}
     230                    />
     231                    {showCaptions && img.caption && (
     232                      <div className="my-gallery__slideshow-caption" dangerouslySetInnerHTML={{ __html: img.caption }} />
     233                    )}
     234                  </div>
     235                );
     236              })}
     237            </div>
     238           
     239            {/* Navigation Controls */}
     240            {showNavigation && images.length > 1 && (
     241              <>
     242                <button
     243                  className="my-gallery__slideshow-prev"
     244                  aria-label="Previous slide"
     245                  type="button"
     246                >
     247                  <span>‹</span>
     248                </button>
     249                <button
     250                  className="my-gallery__slideshow-next"
     251                  aria-label="Next slide"
     252                  type="button"
     253                >
     254                  <span>›</span>
     255                </button>
     256              </>
     257            )}
     258           
     259            {/* Slide Counter */}
     260            <div className="my-gallery__slideshow-counter">
     261              <span className="current">1</span> / <span className="total">{images.length}</span>
     262            </div>
     263
     264            {/* Play/Pause Control */}
     265            {autoPlay && (
     266              <div className="my-gallery__slideshow-controls">
     267                <button
     268                  className="my-gallery__slideshow-play-pause"
     269                  aria-label={autoPlay ? 'Pause slideshow' : 'Play slideshow'}
     270                  type="button"
     271                  data-playing={autoPlay ? 'true' : 'false'}
     272                >
     273                  <span className="play-icon">▶</span>
     274                  <span className="pause-icon">⏸</span>
     275                </button>
     276              </div>
     277            )}
     278          </div>
     279         
     280          {/* Thumbnails */}
     281          {showThumbnails && images.length > 1 && (
     282            <div className="my-gallery__slideshow-thumbnails" style={{ '--gap': `${gap}px` }}>
     283              {images.map((img, index) => (
     284                <div
     285                  key={img.id || index}
     286                  className={`my-gallery__slideshow-thumb ${index === 0 ? 'active' : ''}`}
     287                  data-slide-index={index}
     288                  data-image-id={img.id || index}
     289                >
     290                  <img
     291                    src={img.sizes?.thumbnail?.url || img.url}
     292                    alt={img.alt || ''}
     293                  />
     294                </div>
     295              ))}
     296            </div>
     297          )}
     298        </div>
     299      </div>
     300    );
    211301  } else if (layoutType === 'imagebrowser') {
    212302    return (
    … …  
    215305          className="my-gallery__imagebrowser"
    216306          data-layout="imagebrowser"
    217           data-bg-color={ImgbackgroundColor}
    218           data-caption-color={ImgCaptionColor}
    219307          data-show-thumbnails={browserShowThumbnails ? 'true' : 'false'}
    220308          data-show-navigation={browserShowNavigation ? 'true' : 'false'}
    … …  
    264352                    />
    265353                    {showCaptions && img.caption && (
    266                       <div className="my-gallery__imagebrowser-caption"
    267                       style={{ color: ImgCaptionColor,
    268                         backgroundColor: ImgbackgroundColor }}
    269                      
    270                       dangerouslySetInnerHTML={{ __html: img.caption }} />
     354                      <div className="my-gallery__imagebrowser-caption" dangerouslySetInnerHTML={{ __html: img.caption }} />
    271355                    )}
    272356                  </div>
    … …  
    340424                title="Fullscreen"
    341425              >
    342                       <span className="fullscreen-enter"><i className="fas fa-expand"></i></span>
    343         <span className="fullscreen-exit"><i className="fas fa-times"></i></span>
     426              <span className="fullscreen-enter"><i className="fas fa-expand"></i></span>
     427<span className="fullscreen-exit"><i className="fas fa-times"></i></span>
    344428              </button>
    345429            </div>
    … …  
    367451      </div>
    368452    );
    369 
    370453  } else if (layoutType === 'masonry') {
    371454    return (

  • photoblocks-gallery/trunk/src/photo-gallery/style.css

    r3390095 r3411083  
    55
    66/* Grid Layout Styles */
    7 .wpc-gallery__grid {
     7.my-gallery__grid {
    88  display: grid !important;
    99  grid-template-columns: repeat(3, 1fr) !important;
    … …  
    1414
    1515/* Force grid layout with data attributes */
    16 .wpc-gallery__grid[data-columns="1"] {
     16.my-gallery__grid[data-columns="1"] {
    1717  grid-template-columns: 1fr !important;
    1818}
    1919
    20 .wpc-gallery__grid[data-columns="2"] {
     20.my-gallery__grid[data-columns="2"] {
    2121  grid-template-columns: repeat(2, 1fr) !important;
    2222}
    2323
    24 .wpc-gallery__grid[data-columns="3"] {
     24.my-gallery__grid[data-columns="3"] {
    2525  grid-template-columns: repeat(3, 1fr) !important;
    2626}
    2727
    28 .wpc-gallery__grid[data-columns="4"] {
     28.my-gallery__grid[data-columns="4"] {
    2929  grid-template-columns: repeat(4, 1fr) !important;
    3030}
    3131
    32 .wpc-gallery__grid[data-columns="5"] {
     32.my-gallery__grid[data-columns="5"] {
    3333  grid-template-columns: repeat(5, 1fr) !important;
    3434}
    3535
    36 .wpc-gallery__grid[data-columns="6"] {
     36.my-gallery__grid[data-columns="6"] {
    3737  grid-template-columns: repeat(6, 1fr) !important;
    3838}
    3939
    40 .wpc-gallery__grid * {
     40.my-gallery__grid * {
    4141  box-sizing: border-box;
    4242}
    4343
    44 .wpc-gallery__item {
     44.my-gallery__item {
    4545  overflow: hidden;
    4646  position: relative;
    4747}
    4848
    49 .wpc-gallery__item img {
     49.my-gallery__item img {
    5050  width: 100%;
    5151  height: auto;
    … …  
    5656}
    5757
    58 .wpc-gallery__item:hover img {
     58.my-gallery__item:hover img {
    5959  transform: scale(1.02);
    6060}
    6161
    62 .wpc-gallery__item figcaption {
     62.my-gallery__item figcaption {
    6363  text-align: center;
    6464  font-size: 0.85em;
    … …  
    6868
    6969/* ===========================================
    70         MASONRY LAYOUT STYLES - FRONTEND
     70   MASONRY LAYOUT STYLES - FRONTEND
    7171   =========================================== */
    72 
     72.my-gallery__masonry *,
    7373.my-gallery__masonry {
    74   display: grid !important;
    75   grid-template-columns: repeat(3, 1fr) !important;
    76   gap: 16px !important;
    77   width: 100%;
    78   box-sizing: border-box;
     74    border-style: none !important;
     75}
     76
     77.my-gallery__masonry {
     78  display: grid;
     79  grid-template-columns: repeat(var(--columns, 3), 1fr);
     80  gap: var(--gap, 16px);
    7981  align-items: start;
    80   border: 0px !important;
    81 }
    82 
    83 /* Force masonry layout with data attributes */
    84 .my-gallery__masonry[data-columns="1"] {
    85   grid-template-columns: 1fr !important;
    86 }
    87 
    88 .my-gallery__masonry[data-columns="2"] {
    89   grid-template-columns: repeat(2, 1fr) !important;
    90 }
    91 
    92 .my-gallery__masonry[data-columns="3"] {
    93   grid-template-columns: repeat(3, 1fr) !important;
    94 }
    95 
    96 .my-gallery__masonry[data-columns="4"] {
    97   grid-template-columns: repeat(4, 1fr) !important;
    98 }
    99 
    100 .my-gallery__masonry[data-columns="5"] {
    101   grid-template-columns: repeat(5, 1fr) !important;
    102 }
    103 
    104 .my-gallery__masonry[data-columns="6"] {
    105   grid-template-columns: repeat(6, 1fr) !important;
    106 }
    107 
    108 .my-gallery__masonry * {
    109   box-sizing: border-box;
    11082}
    11183
    … …  
    11486  position: relative;
    11587  break-inside: avoid;
    116   background: #ffffff;
    117   border-radius: 8px;
    118   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
     88  background: #fff;
     89  border-radius: var(--masonry-border-radius, 8px);
     90  /* border: var(--masonry-border-width, 0px) var(--masonry-border-style, solid) var(--masonry-border-color, #e0e0e0); */
     91  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    11992  transition: all 0.3s ease;
    120   margin-bottom: 0;
    121   page-break-inside: avoid;
    122   -webkit-transform: translateZ(0);
    123   transform: translateZ(0);
    124 }
    125 
    126 .my-gallery__masonry-item:hover {
    127   transform: translateY(-4px) translateZ(0);
    128   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    12993}
    13094
    … …  
    13397  height: auto;
    13498  display: block;
    135   border-radius: 8px;
    136   border: 0px solid transparent;
     99  border-radius: inherit;
    137100  object-fit: cover;
    138101  transition: all 0.3s ease;
    139   vertical-align: top;
     102}
     103
     104.my-gallery__masonry-item:hover {
     105  transform: translateY(-2px);
     106  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    140107}
    141108
    … …  
    145112
    146113.my-gallery__masonry-caption {
    147   padding: 16px 20px 20px;
     114  padding: 12px 16px;
    148115  text-align: center;
    149   font-size: 0.9em;
    150   color: #555;
    151   line-height: 1.5;
    152   background: #ffffff;
    153   border-radius: 0 0 8px 8px;
    154   font-weight: 400;
    155 }
    156 
    157 .my-gallery__masonry-caption:empty {
    158   display: none;
    159 }
    160 
    161 /* Dynamic styling for masonry items using JavaScript classes */
    162 .my-gallery__masonry-item.masonry-style-applied {
    163   border-radius: var(--masonry-border-radius, 8px);
    164 }
    165 
    166 .my-gallery__masonry-item.masonry-style-applied img {
    167   border-radius: var(--masonry-border-radius, 8px);
    168   border: var(--masonry-border-width, 0px) var(--masonry-border-style, solid) var(--masonry-border-color, transparent);
    169 }
    170 
    171 .my-gallery__masonry-item.masonry-style-applied .my-gallery__masonry-caption {
     116  font-size: 0.85em;
     117  color: #666;
     118  line-height: 1.4;
     119  background: #fff;
    172120  border-radius: 0 0 var(--masonry-border-radius, 8px) var(--masonry-border-radius, 8px);
    173121}
    174122
    175 /* Masonry responsive breakpoints */
    176 @media (max-width: 1400px) {
    177   .my-gallery__masonry[data-columns="6"] {
    178     grid-template-columns: repeat(5, 1fr) !important;
    179   }
    180 }
    181 
     123/* Forced heights to simulate masonry (same as editor previews) */
     124.my-gallery__masonry-item:nth-child(6n+1) img { height: 200px; }
     125.my-gallery__masonry-item:nth-child(6n+2) img { height: 280px; }
     126.my-gallery__masonry-item:nth-child(6n+3) img { height: 220px; }
     127.my-gallery__masonry-item:nth-child(6n+4) img { height: 260px; }
     128.my-gallery__masonry-item:nth-child(6n+5) img { height: 180px; }
     129.my-gallery__masonry-item:nth-child(6n+6) img { height: 240px; }
     130
     131/* Responsive Masonry */
    182132@media (max-width: 1200px) {
    183   .my-gallery__masonry[data-columns="6"],
    184   .my-gallery__masonry[data-columns="5"] {
     133  .my-gallery__masonry[style*="--columns: 6"] {
    185134    grid-template-columns: repeat(4, 1fr) !important;
    186135  }
    187136}
    188 
    189137@media (max-width: 900px) {
    190   .my-gallery__masonry[data-columns="6"],
    191   .my-gallery__masonry[data-columns="5"],
    192   .my-gallery__masonry[data-columns="4"] {
     138  .my-gallery__masonry[style*="--columns: 5"],
     139  .my-gallery__masonry[style*="--columns: 4"] {
    193140    grid-template-columns: repeat(3, 1fr) !important;
    194141  }
    195142}
    196 
    197143@media (max-width: 768px) {
    198144  .my-gallery__masonry {
    199145    grid-template-columns: repeat(2, 1fr) !important;
    200146  }
    201  
    202   .my-gallery__masonry-item {
    203     margin-bottom: 0;
    204   }
    205  
    206   .my-gallery__masonry-caption {
    207     padding: 12px 16px 16px;
    208     font-size: 0.85em;
    209   }
    210 }
    211 
     147}
    212148@media (max-width: 480px) {
    213149  .my-gallery__masonry {
    214150    grid-template-columns: 1fr !important;
    215151  }
    216  
    217   .my-gallery__masonry-caption {
    218     padding: 10px 14px 14px;
    219     font-size: 0.8em;
    220   }
    221 }
    222 
    223 /* Loading animation for masonry images */
    224 .my-gallery__masonry-item img {
    225   opacity: 0;
    226   transition: opacity 0.4s ease-in-out, transform 0.3s ease;
    227 }
    228 
    229 .my-gallery__masonry-item img.loaded {
    230   opacity: 1;
    231 }
    232 
    233 /* Hidden items for pagination */
    234 .my-gallery__masonry-item.hidden {
    235   display: none;
    236 }
    237 
    238 /* Enhanced focus states for accessibility */
    239 .my-gallery__masonry-item:focus-within {
    240   outline: 2px solid #0073aa;
    241   outline-offset: 2px;
    242 }
    243 
    244 /* Print styles for masonry */
    245 @media print {
    246   .my-gallery__masonry {
    247     display: block !important;
    248     column-count: 2;
    249     column-gap: 20px;
    250     column-fill: balance;
    251   }
    252  
    253   .my-gallery__masonry-item {
    254     break-inside: avoid;
    255     page-break-inside: avoid;
    256     margin-bottom: 20px;
    257     box-shadow: none;
    258     border: 1px solid #ddd;
    259   }
    260 }
    261 
    262 /* Masonry enhanced hover effects */
    263 .my-gallery__masonry-item::after {
    264   content: '';
    265   position: absolute;
    266   top: 0;
    267   left: 0;
    268   right: 0;
    269   bottom: 0;
    270   background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
    271   opacity: 0;
    272   transition: opacity 0.3s ease;
    273   pointer-events: none;
    274   border-radius: 8px;
    275 }
    276 
    277 .my-gallery__masonry-item:hover::after {
    278   opacity: 1;
    279 }
     152}
     153
     154
     155/* ===========================================
     156             LIGHTBOX LAYOUT STYLES
     157   =========================================== */
    280158
    281159/* Lightbox Layout Styles */
    … …  
    526404
    527405/* ===========================================
    528            SLIDESHOW LAYOUT STYLES
     406   SLIDESHOW LAYOUT STYLES
    529407   =========================================== */
     408
     409.my-gallery__slideshow {
     410  position: relative;
     411  width: 100%;
     412  max-width: 100%;
     413  margin: 0 auto;
     414  background: #ffffff;
     415  border-radius: 16px;
     416  overflow: hidden;
     417  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
     418  border: 1px solid #e5e7eb;
     419}
     420
     421.my-gallery__slideshow:focus {
     422  outline: 2px solid #0073aa;
     423  outline-offset: 2px;
     424}
     425
     426/* Main Slideshow Container */
     427.my-gallery__slideshow-main {
     428  position: relative;
     429  width: 100%;
     430  background: #ffffff;
     431}
     432
     433.my-gallery__slideshow-container {
     434  position: relative;
     435  width: 100%;
     436  height: 500px;
     437  overflow: hidden;
     438  background: #f8fafc;
     439  border-radius: 16px 16px 0 0;
     440}
    530441
    531442/* Individual Slides */
    … …  
    560471  border-radius: 12px;
    561472  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
     473}
     474
     475/* Slide Transitions */
     476.my-gallery__slideshow[data-transition-effect="fade"] .my-gallery__slide {
     477  transition: opacity 0.8s ease-in-out;
     478}
     479
     480.my-gallery__slideshow[data-transition-effect="slide"] .my-gallery__slide {
     481  transform: translateX(100%);
     482  transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
     483}
     484
     485.my-gallery__slideshow[data-transition-effect="slide"] .my-gallery__slide.active {
     486  transform: translateX(0);
     487}
     488
     489.my-gallery__slideshow[data-transition-effect="slide"] .my-gallery__slide.prev {
     490  transform: translateX(-100%);
     491}
     492
     493.my-gallery__slideshow[data-transition-effect="zoom"] .my-gallery__slide {
     494  transform: scale(0.8);
     495  transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
     496}
     497
     498.my-gallery__slideshow[data-transition-effect="zoom"] .my-gallery__slide.active {
     499  transform: scale(1);
     500}
     501
     502/* Slide Captions */
     503.my-gallery__slideshow-caption {
     504  position: absolute;
     505  bottom: 20px;
     506  left: 20px;
     507  right: 20px;
     508  background: rgba(0, 0, 0, 0.7);
     509  color: white;
     510  padding: 16px 20px;
     511  border-radius: 10px;
     512  text-align: center;
     513  font-size: 14px;
     514  font-weight: 400;
     515  line-height: 1.5;
     516  backdrop-filter: blur(8px);
     517}
     518
     519/* Navigation Controls */
     520.my-gallery__slideshow-prev,
     521.my-gallery__slideshow-next {
     522  position: absolute;
     523  top: 50%;
     524  transform: translateY(-50%);
     525  width: 48px;
     526  height: 48px;
     527  background: rgba(255, 255, 255, 0.95);
     528  color: #374151;
     529  border: 1px solid rgba(0, 0, 0, 0.1);
     530  border-radius: 50%;
     531  font-size: 20px;
     532  font-weight: 600;
     533  cursor: pointer;
     534  display: flex;
     535  align-items: center;
     536  justify-content: center;
     537  transition: all 0.3s ease;
     538  z-index: 10;
     539  backdrop-filter: blur(8px);
     540  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
     541  font-size: 42px !important;
     542}
     543
     544.my-gallery__slideshow-prev {
     545  left: 20px;
     546}
     547
     548.my-gallery__slideshow-next {
     549  right: 20px;
     550}
     551
     552.my-gallery__slideshow-prev:hover,
     553.my-gallery__slideshow-next:hover {
     554  background: rgba(255, 255, 255, 1);
     555  transform: translateY(-50%) scale(1.05);
     556  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
    562557}
    563558
    … …  
    839834
    840835/* Hidden items for pagination */
    841 .wpc-gallery__item.hidden,
     836.my-gallery__item.hidden,
    842837.my-gallery__lightbox-item.hidden,
    843838.my-gallery__masonry-item.hidden {
    … …  
    870865  }
    871866 
     867  /* Slideshow mobile adjustments */
     868  .my-gallery__slideshow-container {
     869    height: 350px;
     870  }
     871 
     872  .my-gallery__slideshow-prev,
     873  .my-gallery__slideshow-next {
     874    width: 40px;
     875    height: 40px;
     876    font-size: 16px;
     877    left: 15px;
     878  }
     879 
     880  .my-gallery__slideshow-next {
     881    right: 15px;
     882  }
     883 
     884  .my-gallery__slideshow-play-pause {
     885    width: 38px;
     886    height: 38px;
     887    font-size: 12px;
     888  }
     889 
     890  .my-gallery__slideshow-counter {
     891    padding: 6px 12px;
     892    font-size: 12px;
     893  }
     894 
     895  .my-gallery__slideshow-thumb {
     896    width: 70px;
     897    height: 50px;
     898  }
     899 
     900  .my-gallery__slideshow-caption {
     901    padding: 12px 16px;
     902    font-size: 13px;
     903    bottom: 15px;
     904    left: 15px;
     905    right: 15px;
     906  }
     907 
     908  .my-gallery__slideshow-thumbnails {
     909    padding: 15px;
     910    gap: 10px;
     911  }
     912
    872913  /* Image Browser Mobile */
    873914  .my-gallery__imagebrowser-viewer {
    … …  
    926967
    927968@media (max-width: 480px) {
    928   .wpc-gallery__grid,
     969  .my-gallery__grid,
    929970  .my-gallery__lightbox-grid {
    930971    grid-template-columns: 1fr !important;
    … …  
    952993    padding: 0.7em;
    953994    font-size: 0.8em;
     995  }
     996 
     997  /* Slideshow small mobile adjustments */
     998  .my-gallery__slideshow-container {
     999    height: 280px;
     1000  }
     1001 
     1002  .my-gallery__slideshow-prev,
     1003  .my-gallery__slideshow-next {
     1004    width: 36px;
     1005    height: 36px;
     1006    font-size: 14px;
     1007    left: 10px;
     1008  }
     1009 
     1010  .my-gallery__slideshow-next {
     1011    right: 10px;
     1012  }
     1013 
     1014  .my-gallery__slideshow-play-pause {
     1015    width: 34px;
     1016    height: 34px;
     1017    font-size: 11px;
     1018  }
     1019 
     1020  .my-gallery__slideshow-counter {
     1021    padding: 4px 8px;
     1022    font-size: 11px;
     1023    top: 15px;
     1024    right: 15px;
     1025  }
     1026 
     1027  .my-gallery__slideshow-controls {
     1028    top: 15px;
     1029    left: 15px;
     1030  }
     1031 
     1032  .my-gallery__slideshow-thumb {
     1033    width: 60px;
     1034    height: 40px;
     1035  }
     1036 
     1037  .my-gallery__slideshow-thumbnails {
     1038    padding: 12px;
     1039    gap: 8px;
     1040  }
     1041 
     1042  .my-gallery__slideshow-caption {
     1043    padding: 10px 12px;
     1044    font-size: 12px;
     1045    bottom: 12px;
     1046    left: 12px;
     1047    right: 12px;
     1048  }
     1049 
     1050  .my-gallery__slideshow {
     1051    border-radius: 12px;
     1052  }
     1053 
     1054  .my-gallery__slideshow-container {
     1055    border-radius: 12px 12px 0 0;
    9541056  }
    9551057
    … …  
    10261128/* High resolution display optimization */
    10271129@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
     1130  .my-gallery__slideshow-prev,
     1131  .my-gallery__slideshow-next,
     1132  .my-gallery__slideshow-play-pause,
    10281133  .my-gallery__imagebrowser-prev,
    10291134  .my-gallery__imagebrowser-next,
    … …  
    10351140  }
    10361141 
    1037   /* .my-gallery__slideshow-counter, */
     1142  .my-gallery__slideshow-counter,
    10381143  .my-gallery__imagebrowser-counter {
    10391144    backdrop-filter: blur(12px);
    … …  
    10591164
    10601165/* Focus styles for accessibility */
    1061 /* .my-gallery__slideshow-thumb:focus, */
     1166.my-gallery__slideshow-thumb:focus,
    10621167.my-gallery__imagebrowser-thumb:focus,
    10631168.my-gallery__masonry-item:focus {
    … …  
    10681173
    10691174/* Animation for thumbnail scrolling */
    1070 /* .my-gallery__slideshow-thumbnails, */
     1175.my-gallery__slideshow-thumbnails,
    10711176.my-gallery__imagebrowser-thumbnails {
    10721177  scroll-behavior: smooth;
    … …  
    10741179
    10751180/* Enhanced hover effects */
    1076 /* .my-gallery__slideshow-thumb, */
     1181.my-gallery__slideshow-thumb,
    10771182.my-gallery__imagebrowser-thumb {
    10781183  position: relative;
    … …  
    10801185}
    10811186
    1082 /* .my-gallery__slideshow-thumb::after, */
     1187.my-gallery__slideshow-thumb::after,
    10831188.my-gallery__imagebrowser-thumb::after {
    10841189  content: '';
    … …  
    10941199}
    10951200
    1096 /* .my-gallery__slideshow-thumb:hover::after, */
     1201.my-gallery__slideshow-thumb:hover::after,
    10971202.my-gallery__imagebrowser-thumb:hover::after {
    10981203  opacity: 1;
    … …  
    11381243
    11391244
     1245.my-gallery__slideshow-prev:focus,
     1246.my-gallery__slideshow-next:focus {
     1247  outline: 2px solid #0073aa;
     1248  outline-offset: 2px;
     1249}
     1250
     1251/* Slide Counter */
     1252.my-gallery__slideshow-counter {
     1253  position: absolute;
     1254  top: 20px;
     1255  right: 20px;
     1256  background: rgba(255, 255, 255, 0.95);
     1257  color: #374151;
     1258  padding: 8px 16px;
     1259  border-radius: 20px;
     1260  font-size: 14px;
     1261  font-weight: 500;
     1262  backdrop-filter: blur(8px);
     1263  z-index: 10;
     1264  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
     1265  border: 1px solid rgba(0, 0, 0, 0.1);
     1266}
     1267
     1268/* Play/Pause Controls */
     1269.my-gallery__slideshow-controls {
     1270  position: absolute;
     1271  top: 20px;
     1272  left: 20px;
     1273  z-index: 10;
     1274}
     1275
     1276.my-gallery__slideshow-play-pause {
     1277  width: 44px;
     1278  height: 44px;
     1279  background: rgba(255, 255, 255, 0.95);
     1280  color: #374151;
     1281  border: 1px solid rgba(0, 0, 0, 0.1);
     1282  border-radius: 50%;
     1283  font-size: 14px;
     1284  cursor: pointer;
     1285  display: flex;
     1286  align-items: center;
     1287  justify-content: center;
     1288  transition: all 0.3s ease;
     1289  backdrop-filter: blur(8px);
     1290  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
     1291}
     1292
     1293.my-gallery__slideshow-play-pause:hover {
     1294  background: rgba(255, 255, 255, 1);
     1295  transform: scale(1.05);
     1296  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
     1297}
     1298
     1299.my-gallery__slideshow-play-pause:focus {
     1300  outline: 2px solid #0073aa;
     1301  outline-offset: 2px;
     1302}
     1303
     1304/* Show/hide play/pause icons based on state */
     1305.my-gallery__slideshow-play-pause[data-playing="true"] .play-icon {
     1306  display: none;
     1307}
     1308
     1309.my-gallery__slideshow-play-pause[data-playing="false"] .pause-icon {
     1310  display: none;
     1311}
     1312
     1313/* Thumbnails - Matching the reference design */
     1314.my-gallery__slideshow-thumbnails {
     1315  display: flex;
     1316  gap: 12px;
     1317  padding: 20px;
     1318  background: #ffffff;
     1319  overflow-x: auto;
     1320  scrollbar-width: thin;
     1321  scrollbar-color: #d1d5db #f9fafb;
     1322  border-top: 1px solid #e5e7eb;
     1323}
     1324
     1325.my-gallery__slideshow-thumbnails::-webkit-scrollbar {
     1326  height: 6px;
     1327}
     1328
     1329.my-gallery__slideshow-thumbnails::-webkit-scrollbar-track {
     1330  background: #f9fafb;
     1331  border-radius: 3px;
     1332}
     1333
     1334.my-gallery__slideshow-thumbnails::-webkit-scrollbar-thumb {
     1335  background: #d1d5db;
     1336  border-radius: 3px;
     1337}
     1338
     1339.my-gallery__slideshow-thumbnails::-webkit-scrollbar-thumb:hover {
     1340  background: #9ca3af;
     1341}
     1342
     1343.my-gallery__slideshow-thumb {
     1344  flex-shrink: 0;
     1345  width: 90px;
     1346  height: 60px;
     1347  border-radius: 10px;
     1348  overflow: hidden;
     1349  cursor: pointer;
     1350  border: 2px solid transparent;
     1351  transition: all 0.3s ease;
     1352  background: #f3f4f6;
     1353  position: relative;
     1354}
     1355
     1356.my-gallery__slideshow-thumb:hover {
     1357  transform: translateY(-2px);
     1358  border-color: #9ca3af;
     1359  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     1360}
     1361
     1362.my-gallery__slideshow-thumb.active {
     1363  border-color: #0073aa;
     1364  box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
     1365  transform: translateY(-2px);
     1366}
     1367
     1368.my-gallery__slideshow-thumb.active::before {
     1369  content: '';
     1370  position: absolute;
     1371  top: 0;
     1372  left: 0;
     1373  right: 0;
     1374  bottom: 0;
     1375  background: rgba(0, 115, 170, 0.1);
     1376  pointer-events: none;
     1377}
     1378
     1379.my-gallery__slideshow-thumb img {
     1380  width: 100%;
     1381  height: 100%;
     1382  object-fit: cover;
     1383  display: block;
     1384  transition: opacity 0.3s ease;
     1385}
     1386
     1387.my-gallery__slideshow-thumb:hover img {
     1388  opacity: 0.9;
     1389}
     1390
    11401391/* ===========================================
    1141       IMAGE BROWSER LAYOUT STYLES - FRONTEND
     1392   IMAGE BROWSER LAYOUT STYLES - FRONTEND
    11421393   =========================================== */
    11431394
    … …  
    12321483.my-gallery__imagebrowser-caption {
    12331484  position: absolute;
    1234   bottom: -1px;
    1235   /* background: rgba(0, 0, 0, 0.8); */
     1485  bottom: 20px;
     1486  left: 20px;
     1487  right: 20px;
     1488  background: rgba(0, 0, 0, 0.8);
    12361489  color: white;
    1237   padding: 18px 20px;
     1490  padding: 12px 20px;
    12381491  border-radius: 10px;
    12391492  text-align: center;
    … …  
    12431496  max-width: calc(100% - 40px);
    12441497  word-wrap: break-word;
    1245   width: 100%;
    12461498}
    12471499
    … …  
    12681520  backdrop-filter: blur(8px);
    12691521  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    1270   font-size: 30px !important;
    12711522}
    12721523
    … …  
    15631814
    15641815/* Hidden items for pagination */
    1565 .wpc-gallery__item.hidden,
     1816.my-gallery__item.hidden,
    15661817.my-gallery__lightbox-item.hidden,
    15671818.my-gallery__masonry-item.hidden {
    … …  
    15711822/* Responsive Design */
    15721823@media (max-width: 768px) {
    1573   .wpc-gallery__grid,
     1824  .my-gallery__grid,
    15741825  .my-gallery__lightbox-grid {
    15751826    grid-template-columns: repeat(2, 1fr) !important;
    … …  
    15921843    max-width: 95%;
    15931844    max-height: 95%;
     1845  }
     1846 
     1847  /* Slideshow mobile adjustments */
     1848  .my-gallery__slideshow-container {
     1849    height: 350px;
     1850  }
     1851 
     1852  .my-gallery__slideshow-prev,
     1853  .my-gallery__slideshow-next {
     1854    width: 40px;
     1855    height: 40px;
     1856    font-size: 16px;
     1857    left: 15px;
     1858  }
     1859 
     1860  .my-gallery__slideshow-next {
     1861    right: 15px;
     1862  }
     1863 
     1864  .my-gallery__slideshow-play-pause {
     1865    width: 38px;
     1866    height: 38px;
     1867    font-size: 12px;
     1868  }
     1869 
     1870  .my-gallery__slideshow-counter {
     1871    padding: 6px 12px;
     1872    font-size: 12px;
     1873  }
     1874 
     1875  .my-gallery__slideshow-thumb {
     1876    width: 70px;
     1877    height: 50px;
     1878  }
     1879 
     1880  .my-gallery__slideshow-caption {
     1881    padding: 12px 16px;
     1882    font-size: 13px;
     1883    bottom: 15px;
     1884    left: 15px;
     1885    right: 15px;
     1886  }
     1887 
     1888  .my-gallery__slideshow-thumbnails {
     1889    padding: 15px;
     1890    gap: 10px;
    15941891  }
    15951892
    … …  
    16501947
    16511948@media (max-width: 480px) {
    1652   .wpc-gallery__grid,
     1949  .my-gallery__grid,
    16531950  .my-gallery__lightbox-grid {
    16541951    grid-template-columns: 1fr !important;
    … …  
    16761973    padding: 0.7em;
    16771974    font-size: 0.8em;
     1975  }
     1976 
     1977  /* Slideshow small mobile adjustments */
     1978  .my-gallery__slideshow-container {
     1979    height: 280px;
     1980  }
     1981 
     1982  .my-gallery__slideshow-prev,
     1983  .my-gallery__slideshow-next {
     1984    width: 36px;
     1985    height: 36px;
     1986    font-size: 14px;
     1987    left: 10px;
     1988  }
     1989 
     1990  .my-gallery__slideshow-next {
     1991    right: 10px;
     1992  }
     1993 
     1994  .my-gallery__slideshow-play-pause {
     1995    width: 34px;
     1996    height: 34px;
     1997    font-size: 11px;
     1998  }
     1999 
     2000  .my-gallery__slideshow-counter {
     2001    padding: 4px 8px;
     2002    font-size: 11px;
     2003    top: 15px;
     2004    right: 15px;
     2005  }
     2006 
     2007  .my-gallery__slideshow-controls {
     2008    top: 15px;
     2009    left: 15px;
     2010  }
     2011 
     2012  .my-gallery__slideshow-thumb {
     2013    width: 60px;
     2014    height: 40px;
     2015  }
     2016 
     2017  .my-gallery__slideshow-thumbnails {
     2018    padding: 12px;
     2019    gap: 8px;
     2020  }
     2021 
     2022  .my-gallery__slideshow-caption {
     2023    padding: 10px 12px;
     2024    font-size: 12px;
     2025    bottom: 12px;
     2026    left: 12px;
     2027    right: 12px;
     2028  }
     2029 
     2030  .my-gallery__slideshow {
     2031    border-radius: 12px;
     2032  }
     2033 
     2034  .my-gallery__slideshow-container {
     2035    border-radius: 12px 12px 0 0;
    16782036  }
    16792037
    … …  
    17502108/* High resolution display optimization */
    17512109@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    1752 /*   .my-gallery__slideshow-prev,
     2110  .my-gallery__slideshow-prev,
    17532111  .my-gallery__slideshow-next,
    1754   .my-gallery__slideshow-play-pause, */
     2112  .my-gallery__slideshow-play-pause,
    17552113  .my-gallery__imagebrowser-prev,
    17562114  .my-gallery__imagebrowser-next,
    … …  
    17622120  }
    17632121 
    1764   /* .my-gallery__slideshow-counter, */
     2122  .my-gallery__slideshow-counter,
    17652123  .my-gallery__imagebrowser-counter {
    17662124    backdrop-filter: blur(12px);
    … …  
    17862144
    17872145/* Focus styles for accessibility */
     2146.my-gallery__slideshow-thumb:focus,
    17882147.my-gallery__imagebrowser-thumb:focus,
    17892148.my-gallery__masonry-item:focus {
    … …  
    17942153
    17952154/* Animation for thumbnail scrolling */
     2155.my-gallery__slideshow-thumbnails,
    17962156.my-gallery__imagebrowser-thumbnails {
    17972157  scroll-behavior: smooth;
    … …  
    17992159
    18002160/* Enhanced hover effects */
     2161.my-gallery__slideshow-thumb,
    18012162.my-gallery__imagebrowser-thumb {
    18022163  position: relative;
    … …  
    18042165}
    18052166
    1806 /* .my-gallery__slideshow-thumb::after, */
     2167.my-gallery__slideshow-thumb::after,
    18072168.my-gallery__imagebrowser-thumb::after {
    18082169  content: '';
    … …  
    18182179}
    18192180
    1820 /* .my-gallery__slideshow-thumb:hover::after, */
     2181.my-gallery__slideshow-thumb:hover::after,
    18212182.my-gallery__imagebrowser-thumb:hover::after {
    18222183  opacity: 1;
    … …  
    19492310}
    19502311
    1951 .my-gallery__masonry-item.masonry-style-applied img {
     2312/* .my-gallery__masonry-item.masonry-style-applied img {
    19522313  border-radius: var(--masonry-border-radius, 8px);
    19532314  border: var(--masonry-border-width, 0px) var(--masonry-border-style, solid) var(--masonry-border-color, transparent);
    19542315  transition: all 0.3s ease;
    19552316  width: 100%;
    1956   height: auto;
    19572317  display: block;
    19582318  object-fit: cover;
    1959 }
     2319} */
    19602320
    19612321.my-gallery__masonry-item.masonry-style-applied:hover img {
    … …  
    19832343  text-align: center;
    19842344  padding: 1rem 0;
    1985   /* display: block !important; */
     2345  display: block !important;
    19862346}
    19872347
Note: See TracChangeset for help on using the changeset viewer.