Abstract image of a woman sitting on books and studying on a laptop

Drupal Recipes: Building Image Galleries with jQuery and Flickr

Ben Shell, profile picture
Ben Shell

This document provides instructions for building an image gallery in Drupal using Flickr, jQuery, and various Drupal modules. It discusses planning the user experience and technical requirements, using the Flickr API and a sync module to import images from Flickr, displaying thumbnails and a lightbox viewer, and building an image slider module with Views and jQuery. The document emphasizes using existing "ingredients" over complete solutions, and proper JavaScript practices like namespacing and scope when building custom modules.

TechnologySports
1 of 54
Downloaded 356 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr
Drupal Recipes: Building Image Galleries with jQuery and Flickr

More Related Content

PPT
Drupal image gallery_workshop
Heather Bohn
 
PPT
Rotating Banners In Drupal
Chris Parsons
 
PDF
Intro to Vue
Isatu Conteh
 
PDF
Everything You Need to Know About the Top Changes in Drupal 8
Acquia
 
PDF
DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalCampDN
 
PPT
Learn Dashing Widget in 90 minutes
Larry Cai
 
PDF
Drupal point of vue
David Ličen
 
PDF
Drush - use full power - DrupalCamp Donetsk 2014
Alex S
 
Drupal image gallery_workshop
Heather Bohn
 
Rotating Banners In Drupal
Chris Parsons
 
Intro to Vue
Isatu Conteh
 
Everything You Need to Know About the Top Changes in Drupal 8
Acquia
 
DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalCampDN
 
Learn Dashing Widget in 90 minutes
Larry Cai
 
Drupal point of vue
David Ličen
 
Drush - use full power - DrupalCamp Donetsk 2014
Alex S
 

What's hot (20)

PPT
Taking your module from Drupal 6 to Drupal 7
Phase2
 
PPTX
Vue presentation
Norbert Nader
 
PDF
Drupal 8 Theme System: The Backend of Frontend
Acquia
 
PDF
Room with a Vue - Introduction to Vue.js
Zachary Klein
 
PPTX
Single Page Apps with Drupal 8
Chris Tankersley
 
PPTX
Introduction to modern front-end with Vue.js
monterail
 
PDF
Getting Started with DrupalGap
Alex S
 
PDF
Drupal and diversity of Single sign-on systems
Alex S
 
PPTX
An introduction to Vue.js
Pagepro
 
PDF
Nuxt.JS Introdruction
David Ličen
 
PDF
Build your application in seconds and optimize workflow as much as you can us...
Alex S
 
PDF
Features everywhere
Mediacurrent
 
PDF
The Complementarity of React and Web Components
Andrew Rota
 
PDF
Build Amazing Add-ons for Atlassian JIRA and Confluence
K15t
 
PDF
Solution to capture webpage screenshot with html2 canvas.js for backend devel...
eLuminous Technologies Pvt. Ltd.
 
PDF
An introduction to Vue.js
Javier Lafora Rey
 
PDF
Backbone
Glenn De Backer
 
PPTX
Take your drupal sites offline
Chris Ward
 
PDF
Building Angular Component Libraries
Isatu Conteh
 
PPTX
Vue business first
Vitalii Ratyshnyi
 
Taking your module from Drupal 6 to Drupal 7
Phase2
 
Vue presentation
Norbert Nader
 
Drupal 8 Theme System: The Backend of Frontend
Acquia
 
Room with a Vue - Introduction to Vue.js
Zachary Klein
 
Single Page Apps with Drupal 8
Chris Tankersley
 
Introduction to modern front-end with Vue.js
monterail
 
Getting Started with DrupalGap
Alex S
 
Drupal and diversity of Single sign-on systems
Alex S
 
An introduction to Vue.js
Pagepro
 
Nuxt.JS Introdruction
David Ličen
 
Build your application in seconds and optimize workflow as much as you can us...
Alex S
 
Features everywhere
Mediacurrent
 
The Complementarity of React and Web Components
Andrew Rota
 
Build Amazing Add-ons for Atlassian JIRA and Confluence
K15t
 
Solution to capture webpage screenshot with html2 canvas.js for backend devel...
eLuminous Technologies Pvt. Ltd.
 
An introduction to Vue.js
Javier Lafora Rey
 
Backbone
Glenn De Backer
 
Take your drupal sites offline
Chris Ward
 
Building Angular Component Libraries
Isatu Conteh
 
Vue business first
Vitalii Ratyshnyi
 
Ad

Viewers also liked (6)

PPTX
Building a product's personality
Emma Butin
 
PPTX
LMI - Tools for a positive change in your personality, 6 steps for leadership...
LMI-India
 
PPTX
Rami hamad al khalid (cpt )
Rami Al Shemari
 
PDF
Me Myself and I and the Others
karinka2
 
PPT
Brand Image Building
Jasravee
 
PPTX
PERSONALITY DEVELOPMENT
Dr. Nancy Prasanna Joseph
 
Building a product's personality
Emma Butin
 
LMI - Tools for a positive change in your personality, 6 steps for leadership...
LMI-India
 
Rami hamad al khalid (cpt )
Rami Al Shemari
 
Me Myself and I and the Others
karinka2
 
Brand Image Building
Jasravee
 
PERSONALITY DEVELOPMENT
Dr. Nancy Prasanna Joseph
 
Ad

Similar to Drupal Recipes: Building Image Galleries with jQuery and Flickr (20)

PPTX
6 Special Howtos for Drupal
Wingston
 
PDF
Drupal + Flickr + jQuery
Ben Shell
 
PDF
There's a Module for That, MIMA Summit 2010
Emma Jane Hogbin Westby
 
PPTX
Drupal Camp Porto - Developing with Drupal: First Steps
Luís Carneiro
 
PDF
Drupal Flyover, CMS Expo
Emma Jane Hogbin Westby
 
PDF
Learning PHP for Drupal Theming, DC Chicago 2009
Emma Jane Hogbin Westby
 
PDF
Images drupal
akosh
 
PDF
Fastest Way to DRUPAL
Brahm
 
PDF
JavaScript the Smart Way - Getting Started with jQuery
katbailey
 
PDF
Drupal Roadmap 2010
kathyhh
 
KEY
What is Drupal? For Site Administrators
Web Explorations
 
PPTX
Rapid site production with Drupal
Rob Sawyer
 
PPTX
Drupalcamp Atlanta 2010 Design-to-Theme
Mediacurrent
 
PPT
Drupal: an Overview
Matt Weaver
 
PPT
Drupal Bootcamp Mcn2008
Robert J. Stein
 
PDF
Drupal Front End PHP
Emma Jane Hogbin Westby
 
PDF
Staging Drupal 8 31 09 1 3
Drupalcon Paris
 
ZIP
Drupal Development
Jeff Eaton
 
PPTX
CalArts presentation
Ashok Modi
 
ODP
Upgrading your site from Drupal 6 to Drupal 7
Andrew Martha
 
6 Special Howtos for Drupal
Wingston
 
Drupal + Flickr + jQuery
Ben Shell
 
There's a Module for That, MIMA Summit 2010
Emma Jane Hogbin Westby
 
Drupal Camp Porto - Developing with Drupal: First Steps
Luís Carneiro
 
Drupal Flyover, CMS Expo
Emma Jane Hogbin Westby
 
Learning PHP for Drupal Theming, DC Chicago 2009
Emma Jane Hogbin Westby
 
Images drupal
akosh
 
Fastest Way to DRUPAL
Brahm
 
JavaScript the Smart Way - Getting Started with jQuery
katbailey
 
Drupal Roadmap 2010
kathyhh
 
What is Drupal? For Site Administrators
Web Explorations
 
Rapid site production with Drupal
Rob Sawyer
 
Drupalcamp Atlanta 2010 Design-to-Theme
Mediacurrent
 
Drupal: an Overview
Matt Weaver
 
Drupal Bootcamp Mcn2008
Robert J. Stein
 
Drupal Front End PHP
Emma Jane Hogbin Westby
 
Staging Drupal 8 31 09 1 3
Drupalcon Paris
 
Drupal Development
Jeff Eaton
 
CalArts presentation
Ashok Modi
 
Upgrading your site from Drupal 6 to Drupal 7
Andrew Martha
 

Recently uploaded (20)

PDF
Revolutionizing recommendations a survey: a comprehensive exploration of mode...
IAESIJAI
 
PDF
Intravenous drug administration application for pediatric patients via augmen...
IAESIJAI
 
PDF
The Basics of Artificial Intelligence - Understanding the Key Concepts and Te...
FODUU
 
PDF
【AI論文解説】高速・高品質な生成を実現するFlow Map Models（Part 1～3）
Sony - Neural Network Libraries
 
PDF
Examining Bias in AI Generated News Content.pdf
Government
 
PDF
Secure Java Applications against Quantum Threats
Ana-Maria Mihalceanu
 
PPTX
Blending method and technology for hydrogen.pptx
PradipChanda5
 
PDF
CCUS-as-the-Missing-Link-to-Net-Zero_AksCurious.pdf
AkarshaSrivastava1
 
PDF
GDG Cloud Southlake #45: Patrick Debois: The Impact of GenAI on Development a...
James Anderson
 
PDF
ELLIE29.pdfWETWETAWTAWETAETAETERTRTERTER
ArlietsAmores
 
PDF
Domain-specific knowledge and context in large language models: challenges, c...
IAESIJAI
 
PDF
The Digital Engine Room: Unlocking APAC’s Economic and Digital Potential thro...
flintglobalapac
 
PDF
Advancements in abstractive text summarization: a deep learning approach
IAESIJAI
 
PPTX
From XAI to XEE through Influence and Provenance.Controlling model fairness o...
Paolo Missier
 
PDF
Gestión Unificada de los Riegos Externos
Cristian Garcia G.
 
PDF
Optimizing bioinformatics applications: a novel approach with human protein d...
IAESIJAI
 
PDF
“Introduction to Designing with AI Agents,” a Presentation from Amazon Web Se...
Edge AI and Vision Alliance
 
PDF
Addressing the challenges of harmonizing law and artificial intelligence tech...
IAESIJAI
 
PDF
eBook Outline_ AI in Cybersecurity – The Future of Digital Defense.pdf
samalmaheswar155
 
PPTX
Report in SIP_Distance_Learning_Technology_Impact.pptx
KahelCaponesPamitang
 
Revolutionizing recommendations a survey: a comprehensive exploration of mode...
IAESIJAI
 
Intravenous drug administration application for pediatric patients via augmen...
IAESIJAI
 
The Basics of Artificial Intelligence - Understanding the Key Concepts and Te...
FODUU
 
【AI論文解説】高速・高品質な生成を実現するFlow Map Models（Part 1～3）
Sony - Neural Network Libraries
 
Examining Bias in AI Generated News Content.pdf
Government
 
Secure Java Applications against Quantum Threats
Ana-Maria Mihalceanu
 
Blending method and technology for hydrogen.pptx
PradipChanda5
 
CCUS-as-the-Missing-Link-to-Net-Zero_AksCurious.pdf
AkarshaSrivastava1
 
GDG Cloud Southlake #45: Patrick Debois: The Impact of GenAI on Development a...
James Anderson
 
ELLIE29.pdfWETWETAWTAWETAETAETERTRTERTER
ArlietsAmores
 
Domain-specific knowledge and context in large language models: challenges, c...
IAESIJAI
 
The Digital Engine Room: Unlocking APAC’s Economic and Digital Potential thro...
flintglobalapac
 
Advancements in abstractive text summarization: a deep learning approach
IAESIJAI
 
From XAI to XEE through Influence and Provenance.Controlling model fairness o...
Paolo Missier
 
Gestión Unificada de los Riegos Externos
Cristian Garcia G.
 
Optimizing bioinformatics applications: a novel approach with human protein d...
IAESIJAI
 
“Introduction to Designing with AI Agents,” a Presentation from Amazon Web Se...
Edge AI and Vision Alliance
 
Addressing the challenges of harmonizing law and artificial intelligence tech...
IAESIJAI
 
eBook Outline_ AI in Cybersecurity – The Future of Digital Defense.pdf
samalmaheswar155
 
Report in SIP_Distance_Learning_Technology_Impact.pptx
KahelCaponesPamitang