https://github.com/24hwww/galeria-de-imagenes-usando-api-albumes-de-facebook
Galeria de imagenes usando el API de los albumes de Facebook, en PHP y JS para abrir en un lightbox cada imagen.
https://github.com/24hwww/galeria-de-imagenes-usando-api-albumes-de-facebook
Last synced: 4 months ago
JSON representation
Galeria de imagenes usando el API de los albumes de Facebook, en PHP y JS para abrir en un lightbox cada imagen.
- Host: GitHub
- URL: https://github.com/24hwww/galeria-de-imagenes-usando-api-albumes-de-facebook
- Owner: 24hwww
- License: mpl-2.0
- Created: 2017-05-13T10:56:30.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-05-13T11:50:30.000Z (about 8 years ago)
- Last Synced: 2025-01-09T03:43:28.049Z (5 months ago)
- Size: 16.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Galeria de imagenes en PHP usando albumes de Facebook
## con el API de los albumes de Facebook, en PHP y JS para abrir en un lightbox cada imagen.
DEMO: [http://decoprin.com/](http://decoprin.com/)
### Un poco de cuento:
Este script nació como una solución, al problema: "como hacer para que un cliente cargue las fotos de sus proyectos o lo que sea, sin tener que instalarle un CMS o hacer un sistemita en PHP+MySQL o usar otros servicios..." como flickr, google+, photobucket, etc etc... que son servicios donde se pueden crear galeria de fotos y en muchas ocasiones permiten insertar esas imagenes en portales propios colocando un par de lineas de codigo. En fin.. a pesar de que si hay N cantidad de opciones para el tema, se me ocurre usar facebook que tiene el asunto de los albumes pero a su vez tiene un API muy sencilla de usar y con buena documentación, ademas de el valor agregado: la mayoria sabe usar facebook, o sino se pudiera aprender a usar como subir fotos a facebook... esto en resumen.. ahora veamos lo que necesitamos:
### Requerimientos:
Esta demas decir los requerimientos basicos para correr PHP.
Lo que se necesita colocar para este caso es: [jquery.magnific-popup.min.js](https://cdnjs.com/libraries/magnific-popup.js/) esto para crear el lightbox donde se abriran las imagenes cargadas.
sin mas preambulo veamos los codigos:
## EN PHP
```php
";
return false;
}
function get_photos($string){
$url = "https://graph.facebook.com/".$string."/photos?limit=30&fields=images&access_token=[Access Token]";
$photos = file_get_contents($url);
$get_photos = json_decode($photos,true);
echo '
';
foreach ($get_photos as $image) {
foreach($image as $source => $src) {
$photoID = $src['id'];
if(!empty($photoID)){
echo '';
}
}
}
echo '';
return false;
}
foreach ($albums as $key => $content) {
if (isset($content['data'])) {
$dc = $content['data'];
foreach ($dc as $k => $c) {
if($c['type'] == 'normal'){
echo '
';
echo '';
get_photos($c["id"]);
echo '';
}
}
}
}
?>
```
## EN JS
```javascript
$(function(){
//******************* FUNCION LIGHTBOX GALERIA FACEBOOK ********************//
$('.load_photos_album').click(function(e){
e.preventDefault();
var albumID = $(this).attr('album');
$('.get_photos').each(function() {
$(this).magnificPopup({
delegate: 'a.'+albumID,
type: 'image',
gallery: {
enabled:true
}
});
}).magnificPopup('open');
});
});
```
## EN CSS
```css
.item-projecto{position:relative;display:block;clear:both;}
.get_photos{display:none;}
.info-gallery .btn-default{border:0 !important;background:#992800 !important;padding:0px !important;}
.item-projecto{text-align:center;}
.item-projecto h1{font-size:14px;line-height:20px;margin:5px 0;}
```