Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Want to create a JavaScript, scrolling gallery.
New Posts  All Forums:Forum Nav:

Want to create a JavaScript, scrolling gallery.

post #1 of 10
Thread Starter 
For one of my website, I'd like to take the images I have in a static marquee, and place them in a scroll JS gallery that replaces the marquee.

The idea is for users to be able to mouse over the JS marquee, it stops, they click the image, and it's blown up to proper size in an image viewer.

Am I too ambitious here? Haha.
post #2 of 10
Too ambitious? I'm not sure how much of a programming background you have so learning how to do this might be easy or incredibly hard.

Do you know Javascript and/or JQuery? If not, go through the basics of both. There are a lot of resources out there that will get you on the right track.

Otherwise, there are a million Javascript/JQuery plugins that already do what you're looking for.
Time Sink
(21 items)
 
 
CPUMotherboardGraphicsRAM
Intel 2500k ASUS Sabertooth Z77 EVGA GTX 670 FTW G.Skill Ripjaws 8GB (2x4GB) DDR3 1600 
Hard DriveHard DriveHard DriveCooling
Samsung F3 1TB Crucial C300 128GB Corsair Force GT 60GB Noctua NH-U12P 
OSOSMonitorMonitor
Windows 8.1 Professional x64 Apple OS X Mavericks HP ZR24w LG IPS226V 
KeyboardPowerCaseMouse
Razer BlackWidow Seasonic X750 Lian-Li PC-A05B Logitech M500 
Mouse PadAudioAudioAudio
Mionix Propus 380 Zero USB DAC (2009 Version) Emotiva Pro airmotiv 4 Beyerdynamic DT990 600ohm 
Audio
Shure SRH-840 
  hide details  
Reply
Time Sink
(21 items)
 
 
CPUMotherboardGraphicsRAM
Intel 2500k ASUS Sabertooth Z77 EVGA GTX 670 FTW G.Skill Ripjaws 8GB (2x4GB) DDR3 1600 
Hard DriveHard DriveHard DriveCooling
Samsung F3 1TB Crucial C300 128GB Corsair Force GT 60GB Noctua NH-U12P 
OSOSMonitorMonitor
Windows 8.1 Professional x64 Apple OS X Mavericks HP ZR24w LG IPS226V 
KeyboardPowerCaseMouse
Razer BlackWidow Seasonic X750 Lian-Li PC-A05B Logitech M500 
Mouse PadAudioAudioAudio
Mionix Propus 380 Zero USB DAC (2009 Version) Emotiva Pro airmotiv 4 Beyerdynamic DT990 600ohm 
Audio
Shure SRH-840 
  hide details  
Reply
post #3 of 10
Thread Starter 
Quote:
Originally Posted by ImmortalKenny View Post

Too ambitious? I'm not sure how much of a programming background you have so learning how to do this might be easy or incredibly hard.
Do you know Javascript and/or JQuery? If not, go through the basics of both. There are a lot of resources out there that will get you on the right track.
Otherwise, there are a million Javascript/JQuery plugins that already do what you're looking for.

Well, it seems a lot of people's requests for ideas die on the vine, so I figured I might be too ambitious, haha.

I am familiar with Javascript and getting into jQuery, so this shouldn't be too difficult. I was curious if someone on here had done it before, and if they had any suggestions before I search the wide web for resources.

If it's just a matter of simple searching to find what I'm looking for, then I guess I did waste space posting this. tongue.gif

Thanks!
post #4 of 10
Quote:
Originally Posted by VaiFanatic View Post

For one of my website, I'd like to take the images I have in a static marquee, and place them in a scroll JS gallery that replaces the marquee.
The idea is for users to be able to mouse over the JS marquee, it stops, they click the image, and it's blown up to proper size in an image viewer.
Am I too ambitious here? Haha.

I've written a gallery for Typo3. It has also scroll function for the teaser image in the top of the page. In the bottom you can see thumbnails of all the teaser. When you click on a thumbnail the gallery opens. Here is an example. Do you mean something like this? The scroll function isn't that easy it is also automatic. You should post some examples in your request.
Edited by Recursion - 9/29/12 at 2:49am
Crayemulator
(34 items)
 
HTPC
(14 items)
 
Laptop
(20 items)
 
CPUMotherboardGraphicsRAM
AMD FX-6100 Asus Sabretooth 990FX rev 2.0 Sapphire R9 290X Tri-X Vulcan DDR3 2400 Orange Series 
Hard DriveHard DriveHard DriveHard Drive
Western Digital Western Digital Samsung Seagate Barracuda 
Optical DriveCoolingCoolingCooling
LG DVD-RW DH16A1L 140 mm Cooltek fan Noctua NF-P12 premium fan Noctua NF-P12 premium fan 
CoolingCoolingCoolingCooling
140 mm Cooltek fan 140 mm Cooltek fan Coolermaster Seidon M120 140 mm Cooltek fan 
CoolingCoolingCoolingCooling
XSPC 420 reservoir and pump Antec Kühler 920 Phobya G-Silent 12 Phobya G-Silent 12 
OSOSMonitorKeyboard
Windows 8.1 Professional OpenSuSE 12.2 22" LG Flatron W2243T Keysonic 
PowerCaseMouseMouse Pad
Be quiet! Straight Power E6 (700W) Corsair Carbide 400R Logitech Gaming Mouse Case Logic Gel-eez 
AudioAudioOtherOther
Samsung 240T Loudspeaker Onboard SATA Y power cable 2x Y 3-pin power cable 
OtherOther
4x S-ATA cable black 50 cm 12volt 4x 3-pin power cable adapter 
CPUMotherboardGraphicsRAM
AMD Phenom 550 2x Biostar TA870+  ATI Radeon HD 4300 Noname Ram 
Hard DriveHard DriveCoolingCooling
Western Digital Caviar Blue Hitach LC Power Cosmo Cool LC-CC95 Arctic Cooler F9 PWM 
CoolingOSMonitorKeyboard
Arctic Cooler F8 PWM Windows 7 Ultimate 27" Acer Noname 
PowerOther
Enermax Pro87+ 500 Watt  3.5" 1.44 MB disk drive  
CPUMotherboardGraphicsGraphics
Turion 64 X2 Ultra  SB 700 series HD 3650 HD 3200 
RAMRAMHard DriveOptical Drive
Komputerbay Noname Samsung Spinpoint M8 Sony DVD/DV-RW TS-L633A 
OSMonitorKeyboardMouse
Windows 8 LG Flatsscreen PS/2 compatible PS/2 compatible 
AudioOtherOtherOther
AMD High Definition Audio Device Bluetooth Adapter Winbond CIR Transceiver IEEE 1394 Firewire 
OtherOtherOtherOther
Qualcomm Atheros AR928X wireless JMicron PCIe MS/SD/MMC/xD Host Controller Realtek PCIe GBE  Logitech 1.3 M WebCam 
  hide details  
Reply
Crayemulator
(34 items)
 
HTPC
(14 items)
 
Laptop
(20 items)
 
CPUMotherboardGraphicsRAM
AMD FX-6100 Asus Sabretooth 990FX rev 2.0 Sapphire R9 290X Tri-X Vulcan DDR3 2400 Orange Series 
Hard DriveHard DriveHard DriveHard Drive
Western Digital Western Digital Samsung Seagate Barracuda 
Optical DriveCoolingCoolingCooling
LG DVD-RW DH16A1L 140 mm Cooltek fan Noctua NF-P12 premium fan Noctua NF-P12 premium fan 
CoolingCoolingCoolingCooling
140 mm Cooltek fan 140 mm Cooltek fan Coolermaster Seidon M120 140 mm Cooltek fan 
CoolingCoolingCoolingCooling
XSPC 420 reservoir and pump Antec Kühler 920 Phobya G-Silent 12 Phobya G-Silent 12 
OSOSMonitorKeyboard
Windows 8.1 Professional OpenSuSE 12.2 22" LG Flatron W2243T Keysonic 
PowerCaseMouseMouse Pad
Be quiet! Straight Power E6 (700W) Corsair Carbide 400R Logitech Gaming Mouse Case Logic Gel-eez 
AudioAudioOtherOther
Samsung 240T Loudspeaker Onboard SATA Y power cable 2x Y 3-pin power cable 
OtherOther
4x S-ATA cable black 50 cm 12volt 4x 3-pin power cable adapter 
CPUMotherboardGraphicsRAM
AMD Phenom 550 2x Biostar TA870+  ATI Radeon HD 4300 Noname Ram 
Hard DriveHard DriveCoolingCooling
Western Digital Caviar Blue Hitach LC Power Cosmo Cool LC-CC95 Arctic Cooler F9 PWM 
CoolingOSMonitorKeyboard
Arctic Cooler F8 PWM Windows 7 Ultimate 27" Acer Noname 
PowerOther
Enermax Pro87+ 500 Watt  3.5" 1.44 MB disk drive  
CPUMotherboardGraphicsGraphics
Turion 64 X2 Ultra  SB 700 series HD 3650 HD 3200 
RAMRAMHard DriveOptical Drive
Komputerbay Noname Samsung Spinpoint M8 Sony DVD/DV-RW TS-L633A 
OSMonitorKeyboardMouse
Windows 8 LG Flatsscreen PS/2 compatible PS/2 compatible 
AudioOtherOtherOther
AMD High Definition Audio Device Bluetooth Adapter Winbond CIR Transceiver IEEE 1394 Firewire 
OtherOtherOtherOther
Qualcomm Atheros AR928X wireless JMicron PCIe MS/SD/MMC/xD Host Controller Realtek PCIe GBE  Logitech 1.3 M WebCam 
  hide details  
Reply
post #5 of 10
Work in Progress
(16 items)
 
   
CPUMotherboardGraphicsRAM
http://www.newegg.com/Product/Product.aspx?Item... http://www.newegg.com/Product/Product.aspx?Item... http://www.newegg.com/Product/Product.aspx?Item... G.SKILL Ripjaws 4 Series 
Hard DriveCoolingCoolingCooling
SAMSUNG 850 EVO 2.5" 500GB EK-FC R9-295X2 - Acetal+Nickel https://shop.ekwb.com/ek-kit-x360 https://shop.ekwb.com/ek-coolstream-xe-240-double 
CoolingCoolingCoolingCooling
https://shop.ekwb.com/tube-primochill-primoflex... EK-Vardar F3-120 (1850rpm) EK-Vardar F3-120 (1850rpm) EK-ACF Fitting 13/10mm - G1/4 Nickel 
CoolingCoolingPowerCase
Thermal Grizzly Aeronaut High Performance Therm... Fujipoly SARCON G-M Premium System Builder Ther... EVGA 220-P2-1200-X1 Fractal Design Define S 
  hide details  
Reply
Work in Progress
(16 items)
 
   
CPUMotherboardGraphicsRAM
http://www.newegg.com/Product/Product.aspx?Item... http://www.newegg.com/Product/Product.aspx?Item... http://www.newegg.com/Product/Product.aspx?Item... G.SKILL Ripjaws 4 Series 
Hard DriveCoolingCoolingCooling
SAMSUNG 850 EVO 2.5" 500GB EK-FC R9-295X2 - Acetal+Nickel https://shop.ekwb.com/ek-kit-x360 https://shop.ekwb.com/ek-coolstream-xe-240-double 
CoolingCoolingCoolingCooling
https://shop.ekwb.com/tube-primochill-primoflex... EK-Vardar F3-120 (1850rpm) EK-Vardar F3-120 (1850rpm) EK-ACF Fitting 13/10mm - G1/4 Nickel 
CoolingCoolingPowerCase
Thermal Grizzly Aeronaut High Performance Therm... Fujipoly SARCON G-M Premium System Builder Ther... EVGA 220-P2-1200-X1 Fractal Design Define S 
  hide details  
Reply
post #6 of 10
Thread Starter 
Quote:

Actually, this is a great example right here. Unfortunately, it opens up to a URL in a separate page.

I've seen examples before, but I'm having a difficult time recalling where I've seen them.
post #7 of 10
Quote:
Originally Posted by VaiFanatic View Post

Unfortunately, it opens up to a URL in a separate page.
What do you mean? Iif you mean that when you click on a picture it opens into another window, you can change that.
Code:
//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img src="dynamicbook1.gif" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="dynamicbook2.gif" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="dynamicbook3.gif" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="dynamicbook4.gif" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="dynamicbook5.gif" border=1></a>'

the
Code:
<a href="http://">
is simple HTML, just put the link you want in there with a target tag and you can have it load wherever you want. You could, if your scripting is good, probably combine this with a modal so that the image pops up on the screen. (if that's what you are looking for), something like http://fancyapps.com/fancybox/
Edited by MIGhunter - 9/29/12 at 8:55pm
Work in Progress
(16 items)
 
   
CPUMotherboardGraphicsRAM
http://www.newegg.com/Product/Product.aspx?Item... http://www.newegg.com/Product/Product.aspx?Item... http://www.newegg.com/Product/Product.aspx?Item... G.SKILL Ripjaws 4 Series 
Hard DriveCoolingCoolingCooling
SAMSUNG 850 EVO 2.5" 500GB EK-FC R9-295X2 - Acetal+Nickel https://shop.ekwb.com/ek-kit-x360 https://shop.ekwb.com/ek-coolstream-xe-240-double 
CoolingCoolingCoolingCooling
https://shop.ekwb.com/tube-primochill-primoflex... EK-Vardar F3-120 (1850rpm) EK-Vardar F3-120 (1850rpm) EK-ACF Fitting 13/10mm - G1/4 Nickel 
CoolingCoolingPowerCase
Thermal Grizzly Aeronaut High Performance Therm... Fujipoly SARCON G-M Premium System Builder Ther... EVGA 220-P2-1200-X1 Fractal Design Define S 
  hide details  
Reply
Work in Progress
(16 items)
 
   
CPUMotherboardGraphicsRAM
http://www.newegg.com/Product/Product.aspx?Item... http://www.newegg.com/Product/Product.aspx?Item... http://www.newegg.com/Product/Product.aspx?Item... G.SKILL Ripjaws 4 Series 
Hard DriveCoolingCoolingCooling
SAMSUNG 850 EVO 2.5" 500GB EK-FC R9-295X2 - Acetal+Nickel https://shop.ekwb.com/ek-kit-x360 https://shop.ekwb.com/ek-coolstream-xe-240-double 
CoolingCoolingCoolingCooling
https://shop.ekwb.com/tube-primochill-primoflex... EK-Vardar F3-120 (1850rpm) EK-Vardar F3-120 (1850rpm) EK-ACF Fitting 13/10mm - G1/4 Nickel 
CoolingCoolingPowerCase
Thermal Grizzly Aeronaut High Performance Therm... Fujipoly SARCON G-M Premium System Builder Ther... EVGA 220-P2-1200-X1 Fractal Design Define S 
  hide details  
Reply
post #8 of 10
Thread Starter 
Quote:
Originally Posted by MIGhunter View Post

What do you mean? Iif you mean that when you click on a picture it opens into another window, you can change that.
Code:
//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img src="dynamicbook1.gif" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="dynamicbook2.gif" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="dynamicbook3.gif" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="dynamicbook4.gif" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="dynamicbook5.gif" border=1></a>'
the
Code:
<a href="http://">
is simple HTML, just put the link you want in there with a target tag and you can have it load wherever you want. You could, if your scripting is good, probably combine this with a modal so that the image pops up on the screen. (if that's what you are looking for), something like http://fancyapps.com/fancybox/

No, I'm saying I'd like it to open on the same page, but in a photo viewer, sort of how a Dialog works in jQuery Mobile. It pops up over the current page, and can be closed out with a button, your can move to the previous or next photo.

The FancyBox is more like it, now turn that into a marquee gallery and I have what I want. I'll play around with that.
Edited by VaiFanatic - 9/30/12 at 12:01am
post #9 of 10
simplyScroll v2 + fancybox or lightbox or etc...... will do what you want.
Edited by tom.slick - 9/30/12 at 2:22pm
Core I7
(13 items)
 
  
CPUMotherboardGraphicsRAM
I7 920 rev. D0 @ 4.26Ghz EVGA X58 SLI EVGA GTX 285 OCZ XMP 3x2Gb (pc3 12800) 
Hard DriveOptical DriveOSMonitor
Western Digital Caviar Black 640Gb x 2 LG GH22LS30 openSuse 12.1 x64 HP F2105 
PowerCase
CORSAIR 850TX Cooler Master ATCS 840 
  hide details  
Reply
Core I7
(13 items)
 
  
CPUMotherboardGraphicsRAM
I7 920 rev. D0 @ 4.26Ghz EVGA X58 SLI EVGA GTX 285 OCZ XMP 3x2Gb (pc3 12800) 
Hard DriveOptical DriveOSMonitor
Western Digital Caviar Black 640Gb x 2 LG GH22LS30 openSuse 12.1 x64 HP F2105 
PowerCase
CORSAIR 850TX Cooler Master ATCS 840 
  hide details  
Reply
post #10 of 10
Thread Starter 
Quote:
Originally Posted by tom.slick View Post

simplyScroll v2 + fancybox or lightbox or etc...... will do what you want.

That's what I'm going to go with. I haven't had a chance to implement anything over the last few days. Been busy with non-web development based tasks. Hopefully this weekend I can get the ball rolling.

Thanks to everyone for the input.
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Want to create a JavaScript, scrolling gallery.