Plugins

  • ProgImg
  • Alert
  • Slide

ProgImg [ .progressive ]

Adicione a opção de escala para animação da imagem de origem. Propociona carregamento de imagem em escalada, fazendo o site u=iniciar mais leve.

              
                
                <link href="plug/progimg/progimg.min.css">
                <script src="plug/progimg/progimg.min.js"></script>
                
              
            
              
                
                <li class="progressive">
                    <a href="">
                        <img
                        src="img/img-thumb.png"
                        data-src="img/img.png"
                        alt="descrição"
                        class="lazy">
                    </a>
                </li>

Crie uma imagem principal e uma thumb (pequena). A thumb será carregada inicialmente e ao subir o scroll a principal é carregada.

              
                
                (function() {
                    new Progressive({
                        el: '#swup',
                        lazyClass: 'lazy',
                        removePreview: true,
                        scale: true,
                    }).fire()
                })()

Script a ser carregado na pagina desejada.

              
                
                .ulimg {
                    list-style: none;
                    display: inline-block;
                    width: 100%;
                }
                .ulimg li {
                    width: 300px;
                    height: 300px;
                    display: inline-block;
                }
                .ulimg li a {
                    display: inline-block;
                    width: 300px;
                    height: 300px;
                }
                .ulimg li a .lazy {
                    width: 300px;
                    height: 300px;
                    object-fit: cover;
                }

Este CSS é ideia para o thumb ficar 100%, esta é a ideia para poder ter 100% de aproveitamento do sistema.




Referencia: https://github.com/ccforward/progressive-image

Alert [ SweetAlert2 ]

Estamos Utilizando o SweetAlert2 como referencia para o sistema de Alerts. leve e elegante, ajustamos ele para melhor nos atender.

              
                
                <script src="../dist/plug/sweet2/sweetalert2.min.js"></script>

Sucesso Infor Alerta Perigo Divudas Confirme

  • success, info, warning, error, question

Referencia: https://sweetalert2.github.io/

              
                
                document.querySelectorAll('.btn-sucesso').forEach(function(btn) {
                    btn.addEventListener('click', function(event) {
                        event.preventDefault();
                        Swal.fire({
                            title: 'Sucesso!',
                            text: 'Dados Cadastrados com Sucesso!',
                            icon: 'success',
                            showConfirmButton: false,
                            timer: 3000,
                            position: 'bottom-end',
                        });
                    });
                });

                document.querySelectorAll('.btn-infor').forEach(function(btn) {
                    btn.addEventListener('click', function(event) {
                        event.preventDefault();
                        Swal.fire({
                            title: 'Informe!',
                            text: 'Dados Atualizados com Sucesso!',
                            icon: 'info',
                            showConfirmButton: false,
                            timer: 3000,
                            position: 'top-end',
                        });
                    });
                });

Slide [ .swiper ]

Estamos Utilizando o Swiper como referencia para o sistema de Banner e Carrossel de Imagens. leve e elegante, ajustamos ele para melhor nos atender.

              
                
                    <link rel="stylesheet" href="../dist/plug/swiper/swiper.min.css">
                    <script src="../dist/plug/swiper/swiper.min.js"></script>
                
              
            
              
                
                var swiper = new Swiper(".swiper", {
                    loop: true,
                    grabCursor: true,
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true,
                    },
                    autoplay: {
                        delay: 1000,
                        disableOnInteraction: false,
                    },
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },
                    speed: 800,
                });
                
              
            
              
                
                    <div class="swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="https://picsum.photos/1200/300?random=1" class="wp100"></div>
                            <div class="swiper-slide"><img src="https://picsum.photos/1200/300?random=2" class="wp100"></div>
                            <div class="swiper-slide"><img src="https://picsum.photos/1200/300?random=3" class="wp100"></div>
                            <div class="swiper-slide"><img src="https://picsum.photos/1200/300?random=4" class="wp100"></div>
                            <div class="swiper-slide"><img src="https://picsum.photos/1200/300?random=5" class="wp100"></div>
                        </div>
                        <div class="swiper-pagination"></div>
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>

Referencia: https://swiperjs.com/get-started