Hack Forums
Image Gallery for a shop? - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Image Gallery for a shop? (/showthread.php?tid=5084844)



Image Gallery for a shop? - Chad ThunderCock - Dec 7, 2015

How do you make those image galleries that most gaming shops have? I'm having a hard time finding how to do these.

Finishing a 3 year programming course which included VB/a little bit of C#/PHP/JS/HTML/Mysql

And the final year is about making a site, doing a gaming shop site and finished the header already although having a hard time with the image gallery atm


* - Exemplification - Dec 7, 2015

You should provide an example of what you mean. I personally am not positive exactly what you are talking about and I'm sure some others are not as well. "galleries" is vague

Most interactive galleries and such are made with javascript, so search for javascript galleries.


* - Yoshi - Dec 7, 2015

Not sure what you mean, but i used "slick" to make a image slider.


* - Chad ThunderCock - Dec 10, 2015

(Dec 7, 2015 02:08 AM)Exemplification Wrote:  You should provide an example of what you mean. I personally am not positive exactly what you are talking about and I'm sure some others are not as well. "galleries" is vague

Most interactive galleries and such are made with javascript, so search for javascript galleries.

Stuff like these:

http://www.templatemonster.com/demo/51048.html

http://www.gamestheshop.com/

https://uk.gamesplanet.com/




Especially the first one, any idea how I can find something like that?


* - D3xus - Dec 10, 2015

They use image sliders with a few different languages to get it to work.

If you feel comfortable with JavaScript, I recommend http://responsiveslides.com for an image gallery. Very easy to configure, lots of options, and takes a little bit of time to set up after downloading.

I've used it a lot, so reply here or PM me if you have questions.


* - Chad ThunderCock - Dec 10, 2015

(Dec 10, 2015 02:15 PM)D3xus Wrote:  They use image sliders with a few different languages to get it to work.

If you feel comfortable with JavaScript, I recommend http://responsiveslides.com for an image gallery. Very easy to configure, lots of options, and takes a little bit of time to set up after downloading.

I've used it a lot, so reply here or PM me if you have questions.

thanks, that one is pretty cool, do you have any idea if it's possible to make like a fading slider? where the images instead of just being inside simple borders, near the limits of the border (left and right) it slowly starts to fade(But not an animation simply all the images in the slider are like it) until it matches the sites background?



Also would u mind telling me how to make my site auto adjust? I usually work in a 1024x768 or 1280x900's monitor and the site in my monitor 1920x1080 looks terrible due to being so wide and stretched


* - D3xus - Dec 10, 2015

-F0rsak3n- Wrote:do you have any idea if it's possible to make like a fading slider? where the images instead of just being inside simple borders, near the limits of the border (left and right) it slowly starts to fade(But not an animation simply all the images in the slider are like it) until it matches the sites background?
Something like this?


Quote:Also would u mind telling me how to make my site auto adjust? I usually work in a 1024x768 or 1280x900's monitor and the site in my monitor 1920x1080 looks terrible due to being so wide and stretched

You're talking about responsive design. Here is a good intro to making your site auto-adjust instead of only working with certain resolutions.


* - Chad ThunderCock - Dec 11, 2015

(Dec 10, 2015 07:47 PM)D3xus Wrote:  Something like this?


You're talking about responsive design. Here is a good intro to making your site auto-adjust instead of only working with certain resolutions.

I may have an eye problem but all I see in that image is a completely normal image (which is a bridge from Portugal) I believe. Can't find the blurs, will try in a new browser


* - Exemplification - Dec 11, 2015

(Dec 11, 2015 12:25 AM)-F0rsak3n- Wrote:  I may have an eye problem but all I see in that image is a completely normal image (which is a bridge from Portugal) I believe. Can't find the blurs, will try in a new browser

Golden Gate Bridge in San Francisco, California 🤐




You can't actually just easily blur the edges in CSS you can only make it sorta look like they are blurred.
This is the intended output of the JSFiddle linked
Image, Small (Click to View)

Another possible solution (coincidentally perhaps) in the same Stack Overflow thread as the other, but using inset shadows.
http://jsfiddle.net/d9Q5H/1/
This is the intended output of the JSFiddle linked
Image, Small (Click to View)


* - Chad ThunderCock - Dec 11, 2015

Damn making the website responsive based on the monitor res is a pain in the ass :s I never use % I always use px


* - Chad ThunderCock - Dec 16, 2015

(Dec 10, 2015 02:15 PM)D3xus Wrote:  They use image sliders with a few different languages to get it to work.

If you feel comfortable with JavaScript, I recommend http://responsiveslides.com for an image gallery. Very easy to configure, lots of options, and takes a little bit of time to set up after downloading.

I've used it a lot, so reply here or PM me if you have questions.

Mate could you help me out making a slider that looks like the first one here:

http://responsiveslides.com/themes/themes.html


I tried copying everything, all the codes and the parameters he sets on the JS for that slider but it's not really working.