7 replies [Last post]
Prodigy April
Prodigy April's picture
Offline
Regular
Massachusetts
Last seen: 1 year 51 weeks ago
Massachusetts
Timezone: GMT-4
Joined: 2012-06-08
Posts: 15
Points: 20

Okay I realized there are so many topics and threads that it might take me a long time to search for a topic that refers to my current issue. I am creating a page that needs to have a small gallery of pictures contained within the middle of the page. Nothing too complicated, maybe a grid 3 squares across and 2 squares down, 6 in total which includes a description spot for each image being displayed. I want it so that when a person clicks on the image a popup menu will display a download option. These images are actually files. I am a graphic designer and create different graphics and photshop brushes. I want to be able to display my current work so anyone can click on them to download the files. Sorry if I sound confusing…but I am not sure how to explain what I want to do. I tried to use templates from online but they have so much code sometimes and I get confused where in my page to paste the code so it does not conflict with what I have currently done. Could someone point me in the right direction?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 28 weeks 1 day ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

Point you in what direction?

Point you in what direction? Smile

Not really sure what you want us to advise, we need and ask that people post code or links as we specifically help with issues in existing code, the question as it stands is a little broad and generic.

What is your level of coding experience? You state you are a graphic designer so how comfortable are you with coding markup and CSS?

You will probably need to provide something by way of code so people can see what you are working with but equally given you mention of popups for download links to files I think you are likely stepping outside a pure coding requirement here.

I would suggest that you think about looking through the jQuery plugin library and seeing what gallery offerings there are as this might be your simplest solution.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Prodigy April
Prodigy April's picture
Offline
Regular
Massachusetts
Last seen: 1 year 51 weeks ago
Massachusetts
Timezone: GMT-4
Joined: 2012-06-08
Posts: 15
Points: 20

In the direction of a place

In the direction of a place that might have some templates. I do not have the code to show as I do not know how to start, I am guessing I would need to make a table with images inside it. So that when you click on one your able to download it. Also, what is the jQuery plugin library? I am making this page from scratch, I only just started learning HTML and CSS not more than a few weeks ago so as I am picking it up fairly quick, I have not figured out how to put images into a table that are linked to a download button. Sorry I am not tying to be a pain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 21 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9148
Points: 3132

A gallery is a list

Your gallery is a list, not a table. As you learn html, think only of what the content is and not its appearance.

Hugo is infatuated with jQuery Love , and if you know what you're doing, it can be a Good Thing®. Mostly, for simpler things, it isn't needed and only adds cruft.

For downloading images, your thumbnail need only link to the downloadable image. Your customer may either left click to open the image in his browser, then right click to save the image if desired, or right click and 'save link as'. The 'popup' is supplied by the browser. It is a Good Thing® to let your visitors use the interfaces they already know. Be careful. On the whole, graphic designers are particularly inept at affordance and user interface design. Their training is print oriented where there is no interaction, and affordance is moot. To beat a dead cliche, the web is not print.

Here are three examples of galleries. One allows for horizontal scrolling, one for captions with the thumbnails, and another allows the selected t-nail to appear in a larger version with captions added automagically (done with a small bit of javascript).

Scrolling gallery

Inline-block galleries

Swapping images

Give these a try with your content. Then we'll have a starting point for your questions.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Prodigy April
Prodigy April's picture
Offline
Regular
Massachusetts
Last seen: 1 year 51 weeks ago
Massachusetts
Timezone: GMT-4
Joined: 2012-06-08
Posts: 15
Points: 20

Oh thanks!

I found a good gallery code, and I really like the slider too. I am almost done with the first page, of course I will have to check your image threads because now I am having some issues with a graphic placement. Smile * runs to the image threads*

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 28 weeks 1 day ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

When you have a working

When you have a working example of the page post a link and we can check it over if you like - was this a jQuery plugin you used then?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Prodigy April
Prodigy April's picture
Offline
Regular
Massachusetts
Last seen: 1 year 51 weeks ago
Massachusetts
Timezone: GMT-4
Joined: 2012-06-08
Posts: 15
Points: 20

I am still unsure what jQuery

I am still unsure what jQuery is actually. Does that mean I can use plugins? I still have two more pages to build, I do however have most of the home page done. I can post it in this thread if you like, maybe someone can help me with a little bit of code cleanup? This is my very first page ever and well…..I can imagine my code might be written a little sloppy.

kostakis548
kostakis548's picture
Offline
newbie
Last seen: 2 years 5 weeks ago
Timezone: GMT+3
Joined: 2012-06-17
Posts: 1
Points: 1

I 'll try to use lightbox to

I 'll try to use lightbox to opening the images