Session 1: This week we will look at several examples of Javascript image galleries. These galleries may take the form of a simple “lightbox,” or they may be implemented as responsive image sliders with slideshow, animation, and many other adjustable options.
Relevant Resources:
LightBox
Fancybox
Fancybox Documentation
Flexslider
An article with many jQuery Gallery Plugins
12 JavaScript Gallery Plugins
Session 2: Let’s continue demonstrations of Javascript image galleries. Also, please look a the following requirements for the next milestone.
Final Web Application Milestone #2
Due: Week 13, Session 2 (before class starts: 2 points)
1. Be prepared to show your template work-in-progress
2. Illustrate the use of a jQuery image gallery on a single page
3. Demonstrate your working navigation system linking to three or more pages
This gives different examples of jquery slider plugins for websites. Although this is in a list form all of the links are clickable and show the different reasons for each particular plugin.
http://webdesignandsuch.com/top-30-responsive-jquery-slider-plugins-for-websites/
http://www.w3schools.com/css/css3_transitions.asp
This links to a page on CSS transitions. I have personally struggled with when and how to apply them so this really helped me.
This link from Tutorials Points deals with jQuery plugins.
“These files provide useful jQuery methods which can be used along with jQuery library methods.”
http://www.tutorialspoint.com/jquery/jquery-plugins.htm
This links to some inspiration for cool navigation ideas for websites!
http://www.dtelepathy.com/blog/inspiration/23-great-examples-of-innovative-navigation-for-your-inspiration
http://html-tuts.com/html-photo-gallery-simple-javascript/
The link above has a nice guide in how to create image galleries in HTML with JavaScript.
http://www.w3schools.com/css/css_image_gallery.asp
The link above takes you to the w3school and talks about how to use CSS to be able to create image galleries. This link helps you try it and mess around with existing code.
https://www.smashingmagazine.com/2007/05/30-best-solutions-for-image-galleries-slideshows-lightboxes/
The above link has a combination of both CSS and HTML code examples and more explanation on what things do or how they are.
https://www.w3schools.com/howto/howto_js_lightbox.asp
The above link shows an example that combines code from Modals and Slideshows to create the lightbox. I like how it has captions in the lightbox under the pictures and shows all the pictures at the bottom with the hover feature.
http://fancybox.net
The above link shows an introduction page to fancy box explaining what it is, features and different examples with different animations such as ‘fade’, ‘elastic’ and ‘none.’
https://github.com/woocommerce/FlexSlider/wiki/FlexSlider-Properties
The above link shows different Flexslider properties such as different animations and easy which helps with jQuery easing plugin.
This website offers a step by step tutorial for creating a simple lightbox – code included.
https://webdesign.tutsplus.com/articles/super-simple-lightbox-with-css-and-jquery–webdesign-3528
19 Examples of lightbox variations that can add a unique effect to your design.
http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/
This website does a great job of breaking down what a responsive image gallery is, ways to use it, and the code to do it yourself.
https://cssreset.com/creating-a-simple-responsive-image-gallery-using-css/
https://2018.stateofjs.com/
This year’s annual survey of JavaScript Developers, with statistics from over 20,000 developers. The data displays are super beautiful, and it’s easy to navigate to see developers’ demographics, most-used features, and satisfaction level.
https://medium.com/@melissamcewen/is-frontend-development-sexist-220040c952b1
An interesting article on being a woman working in tech, and some of the imbalances between front-end developers and back-end developers.
http://www.deadlinenews.co.uk/2018/11/27/modern-elements-necessary-in-good-web-design/
A quick and useful look at some important design trends to include when making your own website.
https://www.w3schools.com/howto/howto_js_slideshow.asp
this is a basic outline of how to create a slideshow starting with instructions for setting up HTML, then adding CSS, and finally adding Javascript
https://www.nationalgeographic.com/photography/proof/2017/05/best-travel-photographer-contest/
This link serves as an example of Javascript slideshow in action- Helps us get a feel of what the finished product should look like and what it adds to the feel of a web page and to user experience
https://www.w3schools.com/howto/howto_js_lightbox.asp
A quick refresher on Lightbox (which I will need for my final) this time adding Javascript into the equation
1.) https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics
This resource helps break down the JavaScript language and the capabilities that go along with JavaScript. This resource talks about: variables, comments, operators, conditionals, functions, and events in addition to other topics.
2.) https://frontendmasters.com/books/front-end-handbook/2019/
This resource is a front-end developer handbook that explains the practice of front-end development. There is a super nice, visual chart about front-end development and the basics broken down (Chapter 2.1: How Front-End Developers Are Made). This resource provides a well-rounded explanation of front-end development.
3.) https://www.tutorialspoint.com/jquery/jquery-basics.htm
This resource explains jQuery basic vocabulary. Topics covered are: string, numbers, boolean, objects, arrays, functions, arguments, context, scope, callback, closures, proxy pattern, and built-in functions.
https://tutvid.com/html-css-wordpress-tutorials/dreamweaver-tutorials/how-to-use-fancybox-jquery-tutorial/
*This webpage explains how to include photos, youtube videos, and maps in a fancybox if you are looking to add more elements from your page to the fancybox.
https://www.granneman.com/webdev/coding/css/fancybox-a-better-lightbox
*If you scroll down on this page, it walks you through lots of ideas for transitions and various effects to add to your fancybox.
https://www.w3.org/WAI/fundamentals/accessibility-usability-inclusion/
*This isn’t related to fancybox, but as we near the end of our final projects, I think it is important to look at the usability features in our sites especially because we are still so much in the design stage. All of these new techniques we are talking about make websites easier to use and may not be our first priority because it doesn’t make the website look particularly prettier, but these features are still important. This site is a good read about usability when designing HTML and good to look back on.
https://stackoverflow.com/questions/tagged/javascript (For addressing questions that people may have already asked. You can see people’s answers to these questions, and there is a built-in points system to rate how helpful the answers are.)
https://developer.mozilla.org/en-US/docs/Web/JavaScript (Acts like a dictionary for JavaScript.)
https://codepen.io/ (This website is designed so that someone can test something you build, and you can see what others have built, all for free.)
http://thenewcode.com/563/Lightbox-Image-Gallery-In-Pure-CSS
This is a great source with an included code to walk you through the creation of coding a lightbox image gallery.
https://bashooka.com/coding/css-javascript-image-gallery-examples/
This source provides over 40 examples of CSS & Javascript Image Galleries with code for each. At a bare minimum, this website also provides great inspiration for your website layout.
https://www.searchenginejournal.com/technical-seo/javascript-fundamentals-cheat-sheet/
This is a great source to understand Java Script. It also has a breakdown of different vocabulary with visuals to reference for potentially confusing language in other tutorials and such.
https://photoswipe.com
This website shows you have Javascript image gallery can work by giving examples of how images move depending on swiping.
https://bashooka.com/coding/css-javascript-image-gallery-examples/
This website shows you all the different styles that are possible within an image gallery. It also shows the different CSS.
https://www.geeksforgeeks.org/how-to-create-an-image-element-dynamically-using-javascript/
This website shows you how to actually use the Javascript through CSS and HTML. It is a good source because you can see how the background affects the design.
https://data-flair.training/blogs/javascript-project-photo-gallery/
This website goes through how to set up an image gallery thoroughly as well as applying HTML and CSS. It also discusses how this may help the overall dynamic of the page.
https://www.geeksforgeeks.org/image-transition-with-fading-effect-using-javascript/
This website goes over how to do a fading photo transitions effect within your image gallery.
https://wowslider.com/rq/several-transition-effects-in-website-image-slideshow-5i.html
This website has many free or cheap plug in transitions that one could use within their slideshow as well as how to download or apply them.
This one is a lightbox tutorial with no JavaScript.
https://codepen.io/gschier/pen/kyRXVx
This one is w3schools on lightboxes
https://www.w3schools.com/howto/howto_js_lightbox.asp
This one is a plug-in for lightbox
https://fslightbox.com
https://www.youtube.com/watch?v=uKVVSwXdLr0
This video shows someone how to create an HTML website with lightbox images.
https://www.geeksforgeeks.org/how-to-create-image-lightbox-gallery-using-html-css-and-javascript/
This site shows code to use
https://quarto.org/docs/prerelease/1.4/lightbox.html
Options you can add or get rid of to adjust the lightbox
https://stackoverflow.com/questions/65526033/how-to-properly-fit-display-pictures-with-lightbox
This shows code you can add to fix width, height, etc.
https://blog.logrocket.com/responsive-image-gallery-css-flexbox/
Demos creating a responsive image gallery both with and without the use of media queries.
https://www.freecodecamp.org/news/how-to-create-a-lightbox-using-html-css-and-javascript/
Details how to create a lightbox with HTML, CSS, and JavaScript. Includes a live example in CodePen to experiment with.
https://www.smashingmagazine.com/2021/10/build-expandable-accessible-gallery/
Demos creating a gallery that is accessible.
https://www.w3schools.com/howto/howto_js_tab_img_gallery.asp
This link shows how to create another type of image gallery using JavaScript and CSS. This tabbed image gallery allows coders to create a line of small images and a larger image beneath them, with the large image corresponding to whichever of the smaller images the webpage viewer clicks on.
https://www.webfx.com/blog/web-design/free_javascript_image_galleries/
16 additional free solutions for displaying your images using Javascript. Many of these galleries feature unique transitions, require very little knowledge of Javascript to implement, or both.
https://dev.to/lucashdoa/building-an-image-gallery-with-pure-javascript-151a
This link functions as a useful way for building your Javascript skills, as it features a tutorial for how to create an image gallery out of pure Javascript code. This removes any extra bells and whistles and lets you focus on understanding the pure Javascript.