What's new
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

Building the Ultimate Gallery


gautamz07

Power User
Messages
338
Likes
73
Hey Guys somebody somebody uploaded this great gallery online and i copied the entire code and tried to re-make it (Just copy paste) , because i wanted to understand how that gallery works .

below is the link of the working gallery .

http://purplefront.net/ultimategallery/

and below is the link of what i have tried to remake in JSfiddle .

http://jsfiddle.net/gautamz07/2KBx8/

Unfortunately , its not yet working in the Jsfiddle :( , i donno why , but i'll still work on it and lets see , if i can get it working exactly as it is in the original gallery .

The resources used for this Gallery are :

bootstrap 3.0
bootstrap.js
Jquery

the below 2 are pluggins used :

prettyPhoto.js
isotope.js

Check out the Jsfiddle and the original page and tell me what you think . TY :D
 

MrToM

Guru
Messages
3,595
Likes
3,321
Check out the Jsfiddle and the original page and tell me what you think . TY :D

Hi gautanz07,
I think that's a lot of code for very little effect.

To be honest that's a complex example for what is essentially a simple image viewer. It uses libraries, plugins, front-ends and who knows what else for what could easily done in just HTML5 and CSS3.

I don't know how experienced you are in writing this kind of stuff so pardon me if I'm speaking out of turn, but starting with the basics, HTML, CSS and JS (And possibly PHP) and learning those first is always going to be better than trying to decipher someone elses minimized js code.....from which you'll learn nothing.

If you know the basics, something like this gallery would seem very easy to you.....a few images displayed when the page loads, a little CSS for the rollover and some JS to expand and close the pop-up window.

Front-end code like bootstrap is fine if that's what you are going to use, learn it and use it, but as they state on their site it cannot be used with other code so if you use it you could find yourself limited as to what you can do.

How are you testing your code whilst learning? (JSfiddle is fine for a quick fiddle but not developing)
Do you have on-line web hosting?
Are you running your own server like Apache or XAMPP?

If none of the above I suggest XAMPP. It sets everything up for you. You write your HTML docs in whatever text editor you choose (I recommend Notepad++), save them to the appropriate folder(s) and access them through your browser. If you have a second machine its even better to set that up as the server and access it from your normal PC....this will give you a better idea of whether your code will work once uploaded to a real web server to be viewed online.

XAMPP also comes with many examples (or at least it did when I used it), which give you a very clear insite into what goes on with the different languages and how everything talks to each other....which sounds as if that's what you want.

Web building can be, and usually ends up being, very complex....once you start learning new things you keep adding little features here and there until you have something quite involved...but the good thing about doing it yourself instead of using libraries and front-ends is that you know exactly how it all works...because you wrote it!

A small image gallery like this is ideal to start learning the basics but do it from scratch, in small steps, with your own code....find out how to:
1. Display images on the page. (HTML)
2. Set the layout of those images. (CSS)
3. Do that 'rollover' effect. (CSS or JS)
4. Expand the image to full size. (CSS or JS)
5. Center that expanded image on the screen or browser window. (CSS or JS)
6. Style the expanded window and put the 'close' icon on it. (CSS or JS)
7. Make the 'close' button close the image. (HTML or JS)

If you break down a project its easy to get 'snippets' of code and slowly build up your page. At each stage you can run it through your server to see how it looks...and adjust if necessary.

Once you get into it you'll learn it fairly quickly, HTML5 and CSS3 are making it easier all the time by shortening the code and making it more 'readable' and logical.....take the HTML5 document declaration for instance....how short?

Seriously, start from the bottom. Get to know HTML5, CSS3, JS and if you set up your own server PHP too. (You'll need to for PHP as its 'server side' code...it doesn't run in your browser like JS).

Above all, have fun....but stay away from complex libraries and 'do-it-all' front-ends whilst learning.

Regards.
MrTom.
 

gautamz07

Power User
Messages
338
Likes
73
Hey Mr Tom , Thanks for ur elaborate explanation . Quite nice of you . I remember once creating a simple gallery in CSS3 , i'll probably go through what i did earlier and share an example . i am not much into PHP , though every now and than , i do a little bit of PHP , XAMPP is setup on my PC and yeah i have a dedicated server to which i can upload stuff to check if its working . for editor preference , i have a very similar one to notepad++ .


Hi gautanz07,


A small image gallery like this is ideal to start learning the basics but do it from scratch, in small steps, with your own code....find out how to:
1. Display images on the page. (HTML)
2. Set the layout of those images. (CSS)
3. Do that 'rollover' effect. (CSS or JS)
4. Expand the image to full size. (CSS or JS)
5. Center that expanded image on the screen or browser window. (CSS or JS)
6. Style the expanded window and put the 'close' icon on it. (CSS or JS)
7. Make the 'close' button close the image. (HTML or JS)

I donno much JS so will try completing what u said in CSS or HTML . and yes i am having fun with what i am doing .

:D :D
 

MrToM

Guru
Messages
3,595
Likes
3,321
I am not much into PHP , though every now and than , i do a little bit of PHP , XAMPP is setup on my PC and yeah i have a dedicated server to which i can upload stuff to check if its working . for editor preference , i have a very similar one to notepad++...
I donno much JS so will try completing what u said in CSS or HTML . and yes i am having fun with what i am doing.

Cool!
Sounds like you're all set up ready then, that's good.
If you're serious about web-design you may find you'll need to have a good basic knowledge of all the major languages. PHP is actually very easy to get along with, and very powerful once you get to know it. I like the fact that a PHP page can include pure HTML, whereas a HTML page can only include HTML. I got into the habit of making every page a PHP page...just in case I needed it...which I probably did 99% of the time.

There are lots of good JS tutorial sites out there and again its pretty easy to use once you get to grips with the logic behind it.

Remember, start small, build gradually, and before you know it it'll be second nature to you.

Regards.
MrTom.
 

gautamz07

Power User
Messages
338
Likes
73
@Mr Tom , U make it sound easy , thanks for the encouragement .. just to quote u again .


Cool!
I got into the habit of making every page a PHP page...just in case I needed it...which I probably did 99% of the time.
MrTom.

I was working on a 17 page website , its a simple static website , but i realised , that to put in the code for the header and footer again and again was a pain , so i decided , i am gonna make it a PHP fie and re-use the same on every page :D

Will continue working on my PHP , JS skills . I can be a slow learner at times though lol .

Anyways , Thank you .

Gautam .
 

MrToM

Guru
Messages
3,595
Likes
3,321
Cool!

That's precisely the reason why PHP was developed, it saves you constantly repeating code.

You can also use the 'Include' file method for sections of a page depending on certain conditions.....if a 'user' is allowed to view a part of the page then 'include' that file....otherwise don't.

Like I said, I never used to save any page as HTML, they were all PHP...you can write pure HTML in a PHP page, save it as a PHP document and it'll work just fine....if you later need to add any PHP to that page you can. If you save pages as HTML you cannot later add PHP to it.

The only exception to this was if the web host only accepted index.html as the 'home' page and a directive in the htaccess file couldn't change it, but this rarely happened.

Oh and BTW, the basics ARE easy......but trying to learn how different 'libraries' work as in your original example is extremely confusing as its non-common code utilising common code.......its just best to learn the 'common' code from the off and be done with it.

Regards.
MrTom.
 

gautamz07

Power User
Messages
338
Likes
73
@Mr tom , I will try implementing what you said :) btw , i want to build an application one day , all by myself , i guess that day is far , but , i'll start now :D

Thks ones again .

Gautam.
 

MrToM

Guru
Messages
3,595
Likes
3,321
That's looking ok.
I use FireFox and had to amend the box-shadow for it to work but the rest was fine.

As HTML5, CSS3 and JS are constantly being developed its essential to keep up-to-date with changes to code.

I'll use the box shadow as an example purely as its in yours:
Before 'box shadow' was officially part of the W3C standards you needed to specify the browser engine prefix for each unrecognised property...

-moz- was used for 'gecko' based browsers like Firefox
-webkit- was for Chrome and Safari
-o- was for Opera
-ms- was for 'trident' based browsers like IE

As far as Firefox is concerned the W3C standards now recognise properties such as box-shadow therefore removing the need for any prefix.
The CSS for box-shadow in Firefox is now just that....box-shadow: etc etc. rather than the old -moz-box-shadow, which no longer works.

It can be a right headache keeping up with the latest code changes and updates to browser engines and the browsers themselves, but as the example above shows, if you don't then your code just wont work.

I appreciate you're just getting into this and you've only done a small example but its best to be aware of these things sooner rather than later.

I don't know if any other properties have changed, or whether it affects other browsers...you'll have to investigate that yourself....its all part being a web developer! LOL.

Keep up the good work.

Regards.
MrTom.
 

gautamz07

Power User
Messages
338
Likes
73
Thank You MrTom , and yeah , CSS3 is awesome , Minus the pre-fixe :D , I actually even used that example on a live website :D
 

Top