使用滑动滑块向图像添加和去除灰度效果

Question

我通过flickity V2向// If you have a template, first make a copy var docCopy = DriveApp.getFileById('abcdefghijklmnop').makeCopy(); var copyId = docCopy.getId(); var doc = DocumentApp.openById(copyId); // Do whatever you need to modify the doc here. // Now we're done, and `doc` needs to turn into a PDF var pdfContent = doc.getAs('application/pdf'); var draftMail = GmailApp.createDraft('william@example.com', 'Email title', 'Pls see attached', { attachments: [pdfContent.getAs(MimeType.PDF)], name: 'Converted doc content' }); // Now send the mail draftMail.send(); 添加了灰度，并且如何在.gallery-cell img Slider时将其删除？与此相同：（https://codepen.io/irvingarmenta/pen/pyLJvv）

.is-selected

//   for an individual element
        var flky = new Flickity('.gallery', {
            // options, defaults listed

            accessibility: true,
            // enable keyboard navigation, pressing left & right keys

            adaptiveHeight: false,
            // set carousel height to the selected slide

            autoPlay: 2000,
            // advances to the next cell
            // if true, default is 3 seconds
            // or set time between advances in milliseconds
            // i.e. `autoPlay: 1000` will advance every 1 second

            cellAlign: 'center',
            // alignment of cells, 'center', 'left', or 'right'
            // or a decimal 0-1, 0 is beginning (left) of container, 1 is end (right)

            cellSelector: undefined,
            // specify selector for cell elements

            contain: true,
            // will contain cells to container
            // so no excess scroll at beginning or end
            // has no effect if wrapAround is enabled

            draggable: '>1',
            // enables dragging & flicking
            // if at least 2 cells

            dragThreshold: 3,
            // number of pixels a user must scroll horizontally to start dragging
            // increase to allow more room for vertical scroll for touch devices

            freeScroll: true,
            // enables content to be freely scrolled and flicked
            // without aligning cells

            friction: 0.2,
            // smaller number = easier to flick farther

            groupCells: false,
            // group cells together in slides

            initialIndex: 0,
            // zero-based index of the initial selected cell

            lazyLoad: true,
            // enable lazy-loading images
            // set img data-flickity-lazyload="src.jpg"
            // set to number to load images adjacent cells

            percentPosition: true,
            // sets positioning in percent values, rather than pixels
            // Enable if items have percent widths
            // Disable if items have pixel widths, like images

            prevNextButtons: true,
            // creates and enables buttons to click to previous & next cells

            pageDots: true,
            // create and enable page dots

            resize: true,
            // listens to window resize events to adjust size & positions

            rightToLeft: true,
            // enables right-to-left layout

            setGallerySize: true,
            // sets the height of gallery
            // disable if gallery already has height set with CSS

            watchCSS: false,
            // watches the content of :after of the element
            // activates if #element:after { content: 'flickity' }

            wrapAround: true
            // at end of cells, wraps-around to first for infinite scrolling

        });

  /* external css: flickity.css */

        * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        body {
            font-family: sans-serif;
        }

        .gallery {
            background: #EEE;
        }

        .gallery-cell {
            width: 33.3%;
            height: 300px;
            margin-right: 10px;
            background: #8C8;
            text-align: center;
        }  &.is-selected {
                img {
                    transform: scale(1);
                    -webkit-filter: grayscale(0) blur(0);
                    filter: grayscale(0) blur(0);
                }
            }

        .gallery-cell img {
            display: inline-block;
            transform: scale(0.7);
            -webkit-filter: grayscale(100%)blur(1.5px);
            filter: grayscale(100%)blur(1.5px);
        }

        /* cell number */

        .gallery-cell:before {
            display: block;
            text-align: center;
            /* content: counter(gallery-cell); */
            line-height: 200px;
            font-size: 80px;
            color: white;
        }

        @media (max-width: 767px) {
            .gallery-cell {
                height: 200px;
                width: 100%;
            }
        }

Answer 1

只需添加到CSS：

.gallery-cell.is-selected img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: grayscale(0) blur(0);
    filter: grayscale(0) blur(0);
}

您为常规图块定义了样式，但您还需要为isSelected图块定义