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>

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

EJEMPLOS DE ENLACE “LEER MÁS” CON JQUERY Y CSS by estudionexos.com

EJEMPLOS DE ENLACE “LEER MÁS” CON JQUERY Y CSS by estudionexos.com

fuente:  https://www.estudionexos.com/post/ejemplos-de-enlace-leer-mas-con-jquery-y-css/

Es habitual que en determinados casos nos soliciten que textos más o menos largos se presenten en forma abreviada con la posiblidad de desplegarlos completamente o volverlos a ocultar. En este gran artículo podras encontrar la manera de hacerlo usando jquery o usando solo CSS para evitar problemas de conflictos entre versiones de jquery que ya estes usando y la que necesitas par aeste ejemplo. Ver artículo completo aquí

javascript & jquery: detectar cuando un div es visible al hacer scroll

fuente: https://oscargascon.es/como-detectar-con-jquery-si-un-elemento-por-su-posicion-es-visible-en-el-navegador/

Buenas a tod@s

Necesitaba hacer el tipico efecto de aparicion de un elemento DIV al hacer scroll, es decir; al ir bajando por la web para verla que cuando tenga que aparecer un div lo haga con algun efecto de aparicion … frase rara, lo se

Direis “hombre con animate.css por ejemplo, chupao” pues si, con animate.css puedes aplicar cualquier efecto de animacion a un div; pero lo guapo es que ese efecto se aplique cuando aparece en escena el div. Por poner un ejemplo, yo quiero hacerle un efecto al footer el cual esta abajo del todo de la web. Si no implementamos el siguiente codigo javascript + jquery pues le va a aplicar el efecto segun se cargue la web con lo que cuando lleguemos a ver el footer no vamos a ver ningun efectillo. Por mas que intento explicarme decentemente no lo consigo, asi que probar vosotros mismos este codigo y sabreis de lo que hablo xDD

 


function elementVisible(elem) {
var visible = true;
var windowTop = $(document).scrollTop();
var windowBottom = windowTop + window.innerHeight;
windowBottom = windowBottom - 400;
var elementPositionTop = elem.offset().top;
var elementPositionBottom = elementPositionTop + elem.height();
if (elementPositionTop >= windowBottom) {
visible = false;
}
return visible;
}

// invoco una función anónima en el evento scroll sobre window
$(window).on("scroll" ,function() {
let elem = $('#a1'); // obtengo el elemento por id

if(elementVisible(elem)){
elem.addClass('fadeInUp animated');
elem2.addClass('fadeInUp animated');
}

});

El codigo pertenece a Oscar Gascon, yo lo he modificado ligeramente disponible otro tipo de funcionalidades. Podeis ver el artículo original en la siguiente URL: https://oscargascon.es/como-detectar-con-jquery-si-un-elemento-por-su-posicion-es-visible-en-el-navegador/

#JavaScript: #Plugin para añadir #calendario #responsive a tu sitio web by http://blog.aulaformativa.com

#JavaScript: #Plugin para añadir #calendario #responsive a tu sitio web by http://blog.aulaformativa.com

fuente: http://blog.aulaformativa.com/javascript-plugin-calendarios/

A continuación te presentamos una lista de útiles JavaScript plugin para calendarios. Estos JavaScript plugin pueden ser fácilmente implementados en tu sitio web o en cualquier aplicación web que deseas. Con estos javascript plugin puedes, además, añadir eventos a las fechas que son relevantes para tu sitio y realizar otras funciones específicas.

Ver artículo completo en http://blog.aulaformativa.com

#html: ventana modal, visor de imagen o #Lightbox en #css sin #jquery by codepen.io

fuente: http://codepen.io/gschier/pen/HCoqh

muy sencillito y muy efectivo … quizas se echen en falta los botones de alante y atras y los efectillos de aparicion pero es muy resulton y poco pesado y muy bueno para evitar engorrosos conflictos de jquery por sus liberias

en el css:

.lightbox {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}

.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 200%;
}

.lightbox:target {
outline: none;
display: block;
}

en el html:

link visible
<a href=”#img1″>
<img src=”https://s3.amazonaws.com/gschierBlog/images/pig-small.jpg”&gt;
</a>

link oculto debido a que sera la imagen en grande que se vera despues de pulsar
<a href=”#_” class=”lightbox” id=”img1″>
<img src=”https://s3.amazonaws.com/gschierBlog/images/pig-big.jpg”&gt;
</a>

#jQuery slide carrusel #Marquee Plugin with #CSS3 Support by @aamirafridi

Fuente: http://aamirafridi.com/jquery/jquery-marquee-plugin

Recently I been working on a project where a static text message needs to be animated similar to non-standard HTML marquee tag.

Googling gives me quite few jQuery plugins but they got so many options and complex html layout/structure was needed for the plugin to work. I decided to make a simple jQuery plugin which can scroll the text either left, right, up or down.

Github:

jQuery plugin to scroll the text like the old traditional marquee — Read More

Latest commit to the master branch on 10-21-2014

Download as zip

 

IMPORTANT NOTE:

I am removing details about options & events from this blog post as github has all the details so its hard to maintain both. Here I will list few examples to show you how to use the plugin with different options:

Examples:

Here is the list of some examples. You can open each pen below in new window and play around it. Also you can click HTML, CSS or JS tab to see the relevant code.

Basic example with default options
HTML:

First include the plugin.

Content inside the main wrapper can have html.

CSS:
JS:
Demo:

Click the Edit button shown below to open the demo in new window.

Starting plugin with options
Using options as data attributes
Mixing data attributes and JS options

Check HTML tab for data attributes options and JS for options provided when applying the plugin. This is useful if you want to start all marquees with default options using JS and then if you want to have different option for certain marquee element using data attributes. Keep in mind that data attributes will take precedence over options provided using JS. Check this example where I define direction using both JS and data attributes.

Events
CSS3 vs jQuery
Direction
Duplicated
pauseOnHover
resumeOnHover (the other way around)

Question on github: “There is some way to do the opposite of “pauseOnHover”, leave the text stopped until you hover on it, and when you mouseout it comes back to normal? Just like spotify does in their app.”

Pause & Resume methods
Toggle method
Destroy method
Change marquee with ajax content

Due to no ‘Access-Control-Allow-Origin’ issue, please click here to open pen in new window to see it in action.

Detectar conflictos de #jQuery, #Javascript, #Mootools mediante la herramienta #Firebug by webempresa.com

Fuente: http://www.webempresa.com/blog/item/1096-detectar-conflictos-de-jquery-javascript-mootools-mediante-la-herramienta-firebug.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+webempresa-joomla-hosting-y-servicios-profesionales+%28Joomla%21+Hosting+y+Servicios+Profesionales+-+Blog%29

En muchas ocasiones nos hemos encontrado con conflictos de librerías como Javascript, JQuery, etc que no permiten el correcto comportamiento de nuestro sitio web, numerosas veces estos conflictos deshabilitan ciertas funcionalidades o acciones del portal que hasta cierto punto es complicado detectar o resolver. Mediante el complemento de Firefox llamado Firebug nos permite detectar este tipo de inconsistencias mediante su consola.

Descargar Firebug desde la web del autor.

En la consola se cargaran las diferentes librerías del sitio web, al repetir la acción que tiene el problema se mostrará la información de errores o conflictos entre extensiones.

Al navegar sobre los ficheros podremos verificar las extensiones que causan conflictos, para verificar si el modulo o plugin es el origen de la inconsistencia hay que despublicarlo y nuevamente probar si la web funciona correctamente.