JAVASCRIPT: Add Instagram Photos To Your Website Without API – instagramFeed by cssscript.com

fuente: https://www.cssscript.com/instagram-photos-feed/

Buenas a todos

la verdad es que funciona bien y no hay necesidad de hacer tokens ni nada, muy rapidamente lo implementais en vuestra web

En el enlace de la fuente que os dejo podreis ver la demo y descargar las librerias necesarias pero os explico lo que tuve que hacer:

 


<div class="container">
<h1>jQuery instagramFeed: Instagram Gallery Plugin</h1>
<div id="instagram-feed-demo" class="instagram_feed"></div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="jquery.instagramFeed.js"></script>
<script>
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'instagram',
'container': "#instagram-feed-demo",
'display_profile': true,
'display_biography': true,
'display_gallery': true,
'get_raw_json': false,
'callback': null,
'styling': true,
'items': 8,
'items_per_row': 4,
'margin': 1
});
});
})(jQuery);
</script>
</div>

Os dejo el articulo completo, algunos me acusaran de plagiador, pero como veis en el titulo del blog y en la primera linea del post siempre indico la fuente. No intento apropiarme del conocimiento de otros xDD

 

Description:

This is the Vanilla JavaScript version of the jQuery instagramFeed plugin, which helps you create a gallery fetching and displaying Instagram photos from any user (or any tag you provide) on your webpage.

Without the need of the Instagram access token.

How to use it:

1. Download and load the minified version of the instagramFeed library in the document.

http://dist/InstagramFeed.min.js

2. Create a placeholder element for the Instagram gallery.

<div id="instagram-feed-demo" class="instagram_feed"></div>

3. Initialize the instagramFeed library and specify the Instagram user (or tag) and container element as follows:

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo" 
});

4. Decide whether to display the profile, biography, gallery, and IGTV.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'display_profile': true,
    'display_biography': true,
    'display_gallery': true,
    'display_igtv': false,
});

5. Determine the max number of items to display. Default: 8.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'items': 10
});

6. Determine the number of items per row. Default: 4.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'items_per_row': 3
});

7. Set the space between photos. Default: 0.5.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'margin': 0.5
});

8. Customize the image size. Default: 640(px).

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'image_size': 480
});

9. Get raw data with the callback function.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'get_data': true,
    'callback': function(data) {
      // ...
    }
});

10. Enable the lazy load functionality. Default: false.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'lazy_load': true
});

11. Retrieve data by tags. Default: false.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'tag': 'tags here'
});

12. Disable the default styling and apply your own CSS to the Instagram gallery.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'styling': false
});
.instagram_profile {
  /* custom styles here */
}

.instagram_profile_image {
  /* custom styles here */
}

.instagram_gallery {
  /* custom styles here */
}

.instagram_igtv {
  /* custom styles here */
}

13. Execute a callback when an error ocurs.

new InstagramFeed({
    on_error: function(error_description, error_code){
      // do something
    }
});

JAVASCRIPT & JQUERY: Minimal Carousel With Continuous Slide by jqueryscript.net

fuente: https://www.jqueryscript.net/slider/carousel-continuous-slide.html

How to use it:

1. Add your contents to the slides as follows:

<pre><div class="content-carousel" id="carousel">
  <div class="content first">
    <h2>Content 1</h2>
  </div>
  <div class="content second">
    <h2>Content 2</h2>
  </div>
  <div class="content third">
    <h2>Content 3</h2>
  </div>
</div></pre>

2. Create pagination bullets that indicate the current slide, and allow the user to manually switch between slides by click. Note that for each slide must have a .button:

<pre><div id="carouselController">
  <span class="button"></span>
  <span class="button"></span>
  <span class="button"></span>
</div></pre>

3. The necessary CSS styles for the carousel &amp; controls. The responsive layout is based on CSS3 flexbox.

<pre>.content-carousel {
  display: flex;
}

.content-carousel .content{
  width: 100%;
  padding-left: 0;
  transition-duration: .5s;
  position: relative;
  left: 0%;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
  border-radius: 1rem;
}

#carouselController {
  display: flex;
  justify-content: center;
  width: 100%;
}

#carouselController .button {
  width: 1rem;
  height: 1rem;
  margin: .5rem;
  border-radius: 50%;
  border: solid 2px #fff;
  cursor: pointer;
}

#carouselController .active {
  background-color: #666;
}</pre>

4. Load the latest jQuery JavaScript library at the end of the document.

<pre><script src="/path/to/cdn/jquery.min.js"></script></pre>

5. The main JavaScript (jQuery script) to enable the carousel.

<pre>$(document).ready(function(){

  var actualSlide = 0;
  var totalSlides = $("#carousel .content").length;
  var gap = 100 / totalSlides;
  var lastSlide = $("#carousel .content").length - 1;

  $("#carousel").css("width", (100 * totalSlides) + "%");
  $("#carouselController .button:eq(" + actualSlide + ")").addClass("active");

  var slide = function(){

    if(actualSlide >= totalSlides)
      actualSlide = 0;

    $("#carouselController .button").removeClass("active");
    $("#carouselController .button:eq(" + actualSlide + ")").addClass("active");

    for (var i = 0; i < totalSlides; i++){

      if(actualSlide != totalSlides)
        $("#carousel .content:eq(" + i + ")").css(
          "left", ((gap * actualSlide) * -1) + "%"
        );
      else
      $("#carousel .content:eq(" + i + ")").css(
        "left", "0%"
      );
    }
  }

  $("#carouselController .button").on("click", function(){
    actualSlide = $(this).index();
    slide();
  });

  window.setInterval(function(){
    if(!$("#carouselContainer").is(':hover')){
      actualSlide += 1;
      slide();
    }
  }, 5000); // override the default duration here

});</pre>

SKATE: Danny Leon en el skatepark de Cimavilla de Gijon – Asturias

Este fin de semana nos ha visitado en Gijón el gran Danny León y sus amigos. Un autentico placer verle derrochar magia en cada vuelo imposible que realiza en el bowl. Esperamos verte de nuevo muy pronto!

Galeria completa: https://www.facebook.com/CoudLain

Javascript: Detectar la aparición y desaparición de un div by Jasoft.org

Artículo publicado en JASOFT.ORG por José Manuel Alarcón

Gran publicación en la que nos facilitan una librería para poder detectar cuando cualquier elemento aparece en la región visible de la web o pantalla del usuario. Os dejo un pequeño extracto, para ver el articulo completo pulsa AQUI

Para conseguir algo así nos vendría muy bien disponer de un evento inViewport o similar que nos informase de cuándo un elemento aparece o desaparece de la parte visible de la página. Nos suscribiríamos a este evento y recibiríamos automáticamente notificaciones si el elemento aparece o desaparece.

JQUERY (javascript) CSS y HTML: igualar el alto (Height) de un DIV a otro

Buenas a todos

Tengo la tipica seccion de dos columnas (50%) donde la parte izquierda es una foto y la derecha es texto. La columna de texto es mucho mas alta, pero quiero que los divs esten igualados en altura al de la foto, para que en la parte del texto salga scroll

Con esta sencilla funcion que he tardado mas de dos horas en encontrar en google, y no entera si no cogiendo cachitos de aqui y cachitos de alli (por eso no indico fuente) podreis realizar lo que os cuento xDD


<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {

//alert('El alto del div es de: ' + $("#b4image").innerHeight() + 'pixels');
var newHeight2 = $("#b4image").innerHeight();
$("#b4text").height(newHeight2);

});

</script>

El alert es solo para comprobar que la funcion esta operativa

Lo que hace es igualar el alto del div con id b4text al de la imagen

Podria ser que el desencadenante de la funcion o “escuchador” document.ready pueda crear problemas al trabajar con imagenes por los tiempos de carga.

Hay otros desencadenantes o listeners que google os enseñara encantado xDD

Height 100% métodos alternativos con CSS3 by @espaibarcelona

fuente: https://www.espai.es/blog/2017/02/height-100-css/

Seguramente ya sabréis que para determinar el “tamaño” de un elemento en css podemos utilizar unidades como los píxeles, puntos, porcentajes o incluso em. Pero quizá no hayáis oído hablar de las unidades vh y vw.  Una unidad vh (viewport height) equivale a un 1% de la altura del viewport (el total de la pantalla del dispositivo que muestre nuestra web). 1vh = 1% del total de la pantalla, 100vh = 100%. Como os habréis imaginado, la unidad vw es el equivalente para el ancho.

Usando estas unidades podemos determinar una altura fullheight de la siguiente manera:

1
2
3
4
5
.fullHeight {
height: 100vh;
}

Leer artículo completo en ESPAI.ES