Using the PhotoSwipe Image Gallery Script

This tutorial is in response to a specific request by someone who wanted to know how to implement the PhotoSwipe Image Gallery script into a mobile JQuery website. Here's a link to PhotoSwipe for some context and a download link of the script for yourself:

http://www.photoswipe.com/

Here is a link to what our final product will be - you should test it out:

http://thecodingwebsite.com/tutorials/photoswipe/photoswipe.html

I basically just used their code examples and example images and removed all of the unnecessary code and such to determine the essential parts needed for a mobile JQuery website implementation. If you would like to just download my working example as a whole, I have placed it into a zip file for you:

http://thecodingwebsite.com/tutorials/photoswipe.zip

Changing Page Content with JQuery

This tutorial is in response to a specific request by someone. Here is the summarized version of their request:

How would you use JQuery to create an image that changes when the mouse is over it and also changes the content (text/image(s)) in a different section of the page dynamically (without refreshing the page)?

In order to change page content with JQuery, you must first import JQuery and know the basics of how to use it, all of which I discussed here.


We will also need two images to test this out with and a section of content to change dynamically when the mouse moves over and out of this image. Here is the code we will use for our initial image:

Importing JQuery into your Website

JQuery is an extension of JavaScript that uses various techniques to virtually extend the capabilities of what you can create with plain JS. The website for JQuery can be found here:

http://jquery.com/

The most recent version of JQuery as of the creation of this tutorial is 1.7.1. You can (and should, if you're going to use it) download the production version of it here:

http://code.jquery.com/jquery-1.7.1.min.js

You can download it by visiting the URL and then clicking File > Save As (or Save Page As) in your browser.

An Overview of Web Pages

Index

I have created this index due to the amount of information present in this tutorial. Feel free to skim past any sections that contain information you already know. This tutorial provides the very basic information about how web pages work in general, and near the end it starts to focus a little bit on how to extend your HTML pages with CSS and JavaScript coding.

An Overview of Web Pages
W3 Schools
HTML
CSS
Extending web page capabilities
JavaScript vs. browser plugin languages
HTML basics
Head tags
Body tags
HTML page example, with CSS and JavaScript
Conclusion