/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Simple Gallery Scripts

Copy linkTweet thisAlerts:
May 15.2011

Hello everyone. I am constantly adding image galleries to sites I create for clients. However, I can never seem to find a gallery script that is simple. Every single one I try is really bulky needing databases, users, and entire engines. These kinds of scripts are just too big for what I need.

Does anyone know of some really simplistic design galleries available? Something that just requires a config file that points to the folder of images or something and a php line or two to insert the gallery into a page (or something similar).

Any ideas?

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERMay 16.2011 — Where are your images to display and do you have an example in HTML of what you are trying to create?


Or a current gallery display? ?
Copy linkTweet thisAlerts:
@EnlightenedShadauthorMay 16.2011 — Well for this particular client I am working with, we just need a simple before and after image gallery. The images themselves can be stored anywhere. I'm more or less just looking for something simple to keep me from having to use full engines such as ZenPhoto. Engines like that are just too complex and require a complete theme to be designed just to make it match the rest of the site. It's way too much work for something as small as I need.

Example: http://www.loveroofing.com/gallery/ That is the site I am currently working on. The page listed there is using the ZenPhoto engine. It's just too much engine for what I'm trying to do. I would like something that I can just tell it where the images are, and tell it where to generate the gallery in the page. Maybe a bit more sophisticated than that but nothing that requires themes or anything like that.
Copy linkTweet thisAlerts:
@JMRKERMay 16.2011 — Since you only gave 3 images for me to work with, you will need to modify the Gallery arrays to your own references.

I would put the file references into an external JS file like

<script type="text/javascript" src="GalleryPage0"></script>

for example.

The <div> sections with the separate galleries could also be an HTML page with a link in the "Sample" page. Your choice!

Good Luck with any modifications. Could be compressed a bit further if necessary.

Should be pretty simple to modify as desired.

?

<i>
</i>&lt;!DOC HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Simple Gallery &lt;/title&gt;

&lt;style type="text/css"&gt;
.Gallery { float: left; margin:5px; }
.GalleryPage { display:none; }
.clear { clear:both; }
&lt;/style&gt;

&lt;script type="text/javascript"&gt;
// For: http://www.webdeveloper.com/forum/showthread.php?t=246427

// Following to be placed in an external JS file after testing
var SampleGallery = [
["http://www.loveroofing.com/gallery/cache/sample-images/urban_terror_icon_by_polishxcii_100_cw85_ch85_thumb.png",'Sample Images'],
["http://www.loveroofing.com/gallery/cache/other-samples/grub-background_100_cw85_ch85_thumb.jpg",'Other Samples'],
["http://www.loveroofing.com/gallery/cache/more-samples/gnome-blackstyle_1600x1200_100_cw85_ch85_thumb.png",'More Samples']
];
var Gallery0 = [
["http://www.loveroofing.com/gallery/cache/sample-images/urban_terror_icon_by_polishxcii_100_cw85_ch85_thumb.png",'Sample 1'],
["http://www.loveroofing.com/gallery/cache/sample-images/urban_terror_icon_by_polishxcii_100_cw85_ch85_thumb.png",'Sample 2'],
["http://www.loveroofing.com/gallery/cache/sample-images/urban_terror_icon_by_polishxcii_100_cw85_ch85_thumb.png",'Sample 3'],
["http://www.loveroofing.com/gallery/cache/sample-images/urban_terror_icon_by_polishxcii_100_cw85_ch85_thumb.png",'Sample 4'],
["http://www.loveroofing.com/gallery/cache/sample-images/urban_terror_icon_by_polishxcii_100_cw85_ch85_thumb.png",'Sample 5'],
["http://www.loveroofing.com/gallery/cache/sample-images/urban_terror_icon_by_polishxcii_100_cw85_ch85_thumb.png",'Sample 6'],
["http://www.loveroofing.com/gallery/cache/sample-images/urban_terror_icon_by_polishxcii_100_cw85_ch85_thumb.png",'Sample 7'],
["http://www.loveroofing.com/gallery/cache/sample-images/urban_terror_icon_by_polishxcii_100_cw85_ch85_thumb.png",'Sample 8'],
["http://www.loveroofing.com/gallery/cache/sample-images/urban_terror_icon_by_polishxcii_100_cw85_ch85_thumb.png",'Sample 9'],
["http://www.loveroofing.com/gallery/cache/sample-images/urban_terror_icon_by_polishxcii_100_cw85_ch85_thumb.png",'Sample 10'],
["http://www.loveroofing.com/gallery/cache/sample-images/urban_terror_icon_by_polishxcii_100_cw85_ch85_thumb.png",'Sample 11'],
["http://www.loveroofing.com/gallery/cache/sample-images/urban_terror_icon_by_polishxcii_100_cw85_ch85_thumb.png",'Sample 12'],
["http://www.loveroofing.com/gallery/cache/sample-images/urban_terror_icon_by_polishxcii_100_cw85_ch85_thumb.png",'Sample 13']
];
var Gallery1 = [
["http://www.loveroofing.com/gallery/cache/other-samples/grub-background_100_cw85_ch85_thumb.jpg",'Other 1'],
["http://www.loveroofing.com/gallery/cache/other-samples/grub-background_100_cw85_ch85_thumb.jpg",'Other 2'],
["http://www.loveroofing.com/gallery/cache/other-samples/grub-background_100_cw85_ch85_thumb.jpg",'Other 3'],
["http://www.loveroofing.com/gallery/cache/other-samples/grub-background_100_cw85_ch85_thumb.jpg",'Other 4'],
["http://www.loveroofing.com/gallery/cache/other-samples/grub-background_100_cw85_ch85_thumb.jpg",'Other 5'],
["http://www.loveroofing.com/gallery/cache/other-samples/grub-background_100_cw85_ch85_thumb.jpg",'Other 6'],
["http://www.loveroofing.com/gallery/cache/other-samples/grub-background_100_cw85_ch85_thumb.jpg",'Other 7'],
["http://www.loveroofing.com/gallery/cache/other-samples/grub-background_100_cw85_ch85_thumb.jpg",'Other 8'],
["http://www.loveroofing.com/gallery/cache/other-samples/grub-background_100_cw85_ch85_thumb.jpg",'Other 9'],
["http://www.loveroofing.com/gallery/cache/other-samples/grub-background_100_cw85_ch85_thumb.jpg",'Other 10'],
["http://www.loveroofing.com/gallery/cache/other-samples/grub-background_100_cw85_ch85_thumb.jpg",'Other 11'],
["http://www.loveroofing.com/gallery/cache/other-samples/grub-background_100_cw85_ch85_thumb.jpg",'Other 12'],
["http://www.loveroofing.com/gallery/cache/other-samples/grub-background_100_cw85_ch85_thumb.jpg",'Other 13']
];
var Gallery2 = [
["http://www.loveroofing.com/gallery/cache/more-samples/gnome-blackstyle_1600x1200_100_cw85_ch85_thumb.png",'More 1'],
["http://www.loveroofing.com/gallery/cache/more-samples/gnome-blackstyle_1600x1200_100_cw85_ch85_thumb.png",'More 2'],
["http://www.loveroofing.com/gallery/cache/more-samples/gnome-blackstyle_1600x1200_100_cw85_ch85_thumb.png",'More 3'],
["http://www.loveroofing.com/gallery/cache/more-samples/gnome-blackstyle_1600x1200_100_cw85_ch85_thumb.png",'More 4'],
["http://www.loveroofing.com/gallery/cache/more-samples/gnome-blackstyle_1600x1200_100_cw85_ch85_thumb.png",'More 5'],
["http://www.loveroofing.com/gallery/cache/more-samples/gnome-blackstyle_1600x1200_100_cw85_ch85_thumb.png",'More 6'],
["http://www.loveroofing.com/gallery/cache/more-samples/gnome-blackstyle_1600x1200_100_cw85_ch85_thumb.png",'More 7'],
["http://www.loveroofing.com/gallery/cache/more-samples/gnome-blackstyle_1600x1200_100_cw85_ch85_thumb.png",'More 8'],
["http://www.loveroofing.com/gallery/cache/more-samples/gnome-blackstyle_1600x1200_100_cw85_ch85_thumb.png",'More 9'],
["http://www.loveroofing.com/gallery/cache/more-samples/gnome-blackstyle_1600x1200_100_cw85_ch85_thumb.png",'More 10'],
["http://www.loveroofing.com/gallery/cache/more-samples/gnome-blackstyle_1600x1200_100_cw85_ch85_thumb.png",'More 11'],
["http://www.loveroofing.com/gallery/cache/more-samples/gnome-blackstyle_1600x1200_100_cw85_ch85_thumb.png",'More 12'],
["http://www.loveroofing.com/gallery/cache/more-samples/gnome-blackstyle_1600x1200_100_cw85_ch85_thumb.png",'More 13']
];

// Following can remain here or in external file
var PagesInGallery = ['GalleryPage0','GalleryPage1','GalleryPage2'];

function toggle(IDS) { // alert(IDS);
for (var i=0; i&lt;PagesInGallery.length; i++) {
if (IDS != PagesInGallery[i]) { document.getElementById(PagesInGallery[i]).style.display = 'none'; }
}
var e = document.getElementById(IDS).style.display;
if (e == 'none') { document.getElementById(IDS).style.display = 'block'; }
else { document.getElementById(IDS).style.display = 'none'; }
}
onload = function() {
for (var i=0; i&lt;PagesInGallery.length; i++) {
document.getElementById(PagesInGallery[i]).style.display = 'none';
}
}

&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;script type="text/javascript"&gt;
var str = '';
for (var i=0; i&lt;SampleGallery.length; i++) {
str += '&lt;div class="Gallery" onclick="toggle('GalleryPage'+i+'')"&gt;';
str += '&lt;img src="'+SampleGallery[i][0]+'"&gt;&lt;br&gt;'+SampleGallery[i][1];
str += '&lt;/div&gt;';
} str += '&lt;p class="clear"&gt;';

str += '&lt;div class="GalleryPage" id="GalleryPage0"&gt;';
for (var i=0; i&lt;Gallery0.length; i++) {
str += '&lt;div class="Gallery"&gt;';
str += '&lt;img src="'+Gallery0[i][0]+'"&gt;&lt;br&gt;'+Gallery0[i][1];
str += '&lt;/div&gt;';
if ((i % 5) == 4) { str += '&lt;br class="clear"&gt;'; }
} str += '&lt;/div&gt;&lt;p class="clear"&gt;';

str += '&lt;div class="GalleryPage" id="GalleryPage1"&gt;';
for (var i=0; i&lt;Gallery1.length; i++) {
str += '&lt;div class="Gallery"&gt;';
str += '&lt;img src="'+Gallery1[i][0]+'"&gt;&lt;br&gt;'+Gallery1[i][1];
str += '&lt;/div&gt;';
if ((i % 5) == 4) { str += '&lt;br class="clear"&gt;'; }
} str += '&lt;/div&gt;&lt;p class="clear"&gt;';

str += '&lt;div class="GalleryPage" id="GalleryPage2"&gt;';
for (var i=0; i&lt;Gallery2.length; i++) {
str += '&lt;div class="Gallery"&gt;';
str += '&lt;img src="'+Gallery2[i][0]+'"&gt;&lt;br&gt;'+Gallery2[i][1];
str += '&lt;/div&gt;';
if ((i % 5) == 4) { str += '&lt;br class="clear"&gt;'; }
} str += '&lt;/div&gt;&lt;p class="clear"&gt;';

document.write(str);
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@EnlightenedShadauthorMay 16.2011 — Haha wow, i didn't expect you to go and write a script out for me lol. Thanks so much though. I will start putting this in place on my home server and see if I can't get it working well. I could even break it down into php files to make it usable in other sites ?. Thanks again!
Copy linkTweet thisAlerts:
@EnlightenedShadauthorMay 16.2011 — Ran the code without modifications here: http://www.loveroofing.com/gallery.php

Thanks a ton. It's very simplistic and just what I need. I will of course do some mods to dress it up a bit but the code is solid. Thanks so much for taking the time to help an amateur out. ?

Marking the thread as "Resolved" as well.
Copy linkTweet thisAlerts:
@JMRKERMay 16.2011 — Ran the code without modifications here: http://www.loveroofing.com/gallery.php

Thanks a ton. It's very simplistic and just what I need. I will of course do some mods to dress it up a bit but the code is solid. Thanks so much for taking the time to help an amateur out. ?

Marking the thread as "Resolved" as well.[/QUOTE]

You're most welcome.

Glad I was able to help from the limited description. ?

It was strickly a guess. ?

Let me know if you need the compression of code suggestion, otherwise good luck! ?
×

Success!

Help @EnlightenedShad spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...