Skip to main content
Correción de etiquetas
Enlace
Ruslan López
  • 11.8k
  • 14
  • 44
  • 88
Se convierte código a snippet
Origen Enlace
Ruslan López
  • 11.8k
  • 14
  • 44
  • 88

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>

 <div class="container">
         <div class="row">
            
         </div>
         <div class="portfolio-menu mt-2 mb-4">
            <ul>
               <li class="btn btn-outline-dark" style="margin: 2px;" data-filter="*">Todos</li>
               <li class="btn btn-outline-dark" style="margin: 2px;" data-filter=".bolsa">Bolsa</li>
               </ul>
         </div>
         <div class="portfolio-item row">
          <div class="item bolsa col-lg-3 col-md-4 col-6 col-sm">
            <a href="/img/productos/Bolsa/bolsa_negra_para_basura.png" class="fancylight popup-btn" data-fancybox-group="light">
            <img class="img-fluid" src="/img/productos/Bolsa/bolsa_negra_para_basura.png" alt="Bolsa negra para basura">
            </a>
            <p class="text-center">Bolsa negra para basura</p>
         </div>

CSS

 .portfolio-menu{
    text-align:center;

  }
  .portfolio-menu ul li{
    display:inline-block;
    margin:0;
    list-style: none;
    padding:10px 15px;
    cursor: pointer;
    -webkit-transition:all 05s ease;
    -moz-transition:all 05s ease;
    -ms-transition:all 05s ease;
    -o-transition:all 05s ease;
    transition:all .5s ease;
  }

  .portfolio-item .item{
    float:left;
    margin-bottom:10px;
  }

JS

$('.portfolio-menu ul li').click(function() {
  $('.portfolio-menu ul li').removeClass('active');
  $(this).addClass('active');

  var selector = $(this).attr('data-filter');
  $('.portfolio-item').isotope({
    filter: selector
  });
  return false;
});
$(document).ready(function() {
  var popup_btn = $('.popup-btn');
  popup_btn.magnificPopup({
    type: 'image',
    gallery: {
      enabled: true
    }
  });
});
.portfolio-menu {
  text-align: center;
}

.portfolio-menu ul li {
  display: inline-block;
  margin: 0;
  list-style: none;
  padding: 10px 15px;
  cursor: pointer;
  -webkit-transition: all 05s ease;
  -moz-transition: all 05s ease;
  -ms-transition: all 05s ease;
  -o-transition: all 05s ease;
  transition: all .5s ease;
}

.portfolio-item .item {
  float: left;
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>

<div class="container">
  <div class="row">

  </div>
  <div class="portfolio-menu mt-2 mb-4">
    <ul>
      <li class="btn btn-outline-dark" style="margin: 2px;" data-filter="*">Todos</li>
      <li class="btn btn-outline-dark" style="margin: 2px;" data-filter=".bolsa">Bolsa</li>
    </ul>
  </div>
  <div class="portfolio-item row">
    <div class="item bolsa col-lg-3 col-md-4 col-6 col-sm">
      <a href="https://povasa.com.mx/wp-content/uploads/2019/09/producto-tres.jpg" class="fancylight popup-btn" data-fancybox-group="light">
        <img class="img-fluid" src="https://povasa.com.mx/wp-content/uploads/2019/09/producto-tres.jpg" alt="Bolsa negra para basura">
      </a>
      <p class="text-center">Bolsa negra para basura</p>
    </div>
 $('.portfolio-menu ul li').click(function(){
            $('.portfolio-menu ul li').removeClass('active');
            $(this).addClass('active');
            
            var selector = $(this).attr('data-filter');
            $('.portfolio-item').isotope({
                filter:selector
            });
            return  false;
        });
        $(document).ready(function() {
        var popup_btn = $('.popup-btn');
        popup_btn.magnificPopup({
        type : 'image',
        gallery : {
            enabled : true
        }
        });
        });
 

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>

 <div class="container">
         <div class="row">
            
         </div>
         <div class="portfolio-menu mt-2 mb-4">
            <ul>
               <li class="btn btn-outline-dark" style="margin: 2px;" data-filter="*">Todos</li>
               <li class="btn btn-outline-dark" style="margin: 2px;" data-filter=".bolsa">Bolsa</li>
               </ul>
         </div>
         <div class="portfolio-item row">
          <div class="item bolsa col-lg-3 col-md-4 col-6 col-sm">
            <a href="/img/productos/Bolsa/bolsa_negra_para_basura.png" class="fancylight popup-btn" data-fancybox-group="light">
            <img class="img-fluid" src="/img/productos/Bolsa/bolsa_negra_para_basura.png" alt="Bolsa negra para basura">
            </a>
            <p class="text-center">Bolsa negra para basura</p>
         </div>

CSS

 .portfolio-menu{
    text-align:center;

  }
  .portfolio-menu ul li{
    display:inline-block;
    margin:0;
    list-style: none;
    padding:10px 15px;
    cursor: pointer;
    -webkit-transition:all 05s ease;
    -moz-transition:all 05s ease;
    -ms-transition:all 05s ease;
    -o-transition:all 05s ease;
    transition:all .5s ease;
  }

  .portfolio-item .item{
    float:left;
    margin-bottom:10px;
  }

JS

 $('.portfolio-menu ul li').click(function(){
            $('.portfolio-menu ul li').removeClass('active');
            $(this).addClass('active');
            
            var selector = $(this).attr('data-filter');
            $('.portfolio-item').isotope({
                filter:selector
            });
            return  false;
        });
        $(document).ready(function() {
        var popup_btn = $('.popup-btn');
        popup_btn.magnificPopup({
        type : 'image',
        gallery : {
            enabled : true
        }
        });
        });

$('.portfolio-menu ul li').click(function() {
  $('.portfolio-menu ul li').removeClass('active');
  $(this).addClass('active');

  var selector = $(this).attr('data-filter');
  $('.portfolio-item').isotope({
    filter: selector
  });
  return false;
});
$(document).ready(function() {
  var popup_btn = $('.popup-btn');
  popup_btn.magnificPopup({
    type: 'image',
    gallery: {
      enabled: true
    }
  });
});
.portfolio-menu {
  text-align: center;
}

.portfolio-menu ul li {
  display: inline-block;
  margin: 0;
  list-style: none;
  padding: 10px 15px;
  cursor: pointer;
  -webkit-transition: all 05s ease;
  -moz-transition: all 05s ease;
  -ms-transition: all 05s ease;
  -o-transition: all 05s ease;
  transition: all .5s ease;
}

.portfolio-item .item {
  float: left;
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>

<div class="container">
  <div class="row">

  </div>
  <div class="portfolio-menu mt-2 mb-4">
    <ul>
      <li class="btn btn-outline-dark" style="margin: 2px;" data-filter="*">Todos</li>
      <li class="btn btn-outline-dark" style="margin: 2px;" data-filter=".bolsa">Bolsa</li>
    </ul>
  </div>
  <div class="portfolio-item row">
    <div class="item bolsa col-lg-3 col-md-4 col-6 col-sm">
      <a href="https://povasa.com.mx/wp-content/uploads/2019/09/producto-tres.jpg" class="fancylight popup-btn" data-fancybox-group="light">
        <img class="img-fluid" src="https://povasa.com.mx/wp-content/uploads/2019/09/producto-tres.jpg" alt="Bolsa negra para basura">
      </a>
      <p class="text-center">Bolsa negra para basura</p>
    </div>
 

agregar etiquetas
Origen Enlace

Yo deseo mostrarintente insertar texto en la parte que remarque en rojo o ya sea aun lado, la idea es meter texto en cada imagen..., pero no lo logre, incluso intente agregar una ref a un html externo creando así quizás un código extra para mostrar la imagen con texto pero no funciono, tambien busque la sintaxis como Fancybox, de data-caption pero no funciona dado que solo se esta usando magnific-popup, de hecho note que no quite el de fancybox xD

Yo deseo mostrar texto en la parte que remarque en rojo o ya sea aun lado, la idea es meter texto en cada imagen...

intente insertar texto en la parte que remarque en rojo o ya sea aun lado, la idea es meter texto en cada imagen, pero no lo logre, incluso intente agregar una ref a un html externo creando así quizás un código extra para mostrar la imagen con texto pero no funciono, tambien busque la sintaxis como Fancybox, de data-caption pero no funciona dado que solo se esta usando magnific-popup, de hecho note que no quite el de fancybox xD

agregar etiquetas
Enlace
Loading
Origen Enlace
Loading