Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Trying to create a popup window of a specific size
New Posts  All Forums:Forum Nav:

Trying to create a popup window of a specific size

post #1 of 4
Thread Starter 
Hey all,

First, I'm no programmer but I'm writing reviews for Bjorn3D and they usually have you take pictures of products, and then resize them to thumbnail size and save it as a separate file so you can have thumbnails, click on them, and open the larger image.

I want to try and eliminate the extra image file by just adjust sizes. I want to open a popup window with the image in it but only have it go to double size and not full-size.

Here is the code that I have so far, and it doesn't help that I'm not sure what variant of html it is lol
Code:
<p style="text-align: center">
        <a class="popup" href="/Material/revimages/Peripherals/Razer%20SWTOR/Mouse2.JPG" style="width: 700px; height: 904px; "><img alt="" src="/Material/revimages/Peripherals/Razer%20SWTOR/Mouse2.JPG" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; width: 350px; height: 452px; " /></a> <img alt="" src="/Material/revimages/Peripherals/Razer%20SWTOR/Mouse3.JPG" style="width: 242px; height: 452px; " /></p>

As you can see, the thumbnail is set to 350x452 and I'd like the popup to show up at 700x940 but I realized that me putting in the width/height in the first statement is useless since it is opening a link, not an image per se.

Any ideas?
King Hippo
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 3770k ASUS Maximuss V Gene MSI Radeon HD 7970 w/ Accelero Extreme Cooler 8gb G.Skill DDR3 1333 
Hard DriveOptical DriveCoolingOS
Intel 520 series 180gb | WD Black SATA3 1Tb| Se... LG Blu-Ray Reader Phantech PH-TC14PE Windows 8 Professional 64-bit 
MonitorKeyboardPowerCase
Yamakasi 27" IPS LED Razer Blackwidow Ultimate: Dragon Age 2 Edition... Corsair GS700w Corsair 600D 
MouseMouse PadAudio
SteelSeries Sensei Star Wars: The Old Republic edition Game Mat Bose 2.1 
  hide details  
Reply
King Hippo
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 3770k ASUS Maximuss V Gene MSI Radeon HD 7970 w/ Accelero Extreme Cooler 8gb G.Skill DDR3 1333 
Hard DriveOptical DriveCoolingOS
Intel 520 series 180gb | WD Black SATA3 1Tb| Se... LG Blu-Ray Reader Phantech PH-TC14PE Windows 8 Professional 64-bit 
MonitorKeyboardPowerCase
Yamakasi 27" IPS LED Razer Blackwidow Ultimate: Dragon Age 2 Edition... Corsair GS700w Corsair 600D 
MouseMouse PadAudio
SteelSeries Sensei Star Wars: The Old Republic edition Game Mat Bose 2.1 
  hide details  
Reply
post #2 of 4
There is a reason for using two separate images. If you resize the full image on the client side (using HTML), the browser must download the full image and then resize it itself, increasing the overall loading time of the page. This is bad if you have many images or images with large resolutions on the same page. It is considered bad practice.
Daily
(16 items)
 
  
CPUMotherboardGraphicsRAM
i7 2600K @ 4.8GHz, 1.4V Maximus IV Extreme GTX 560 DCII TOP 4x4GB Kingston HyperX 1866MHz CL11 
Hard DriveHard DriveCoolingCooling
Kingston HyperX 3K 120GB Samsung 640GB Thermochill PA120.2 Jingway DB-1 Pump 
CoolingCoolingOSMonitor
2x Kaze Jyuni 1900RPM EK Supreme HF Copper plexi Arch Linux x64 Acer X223HQ 1920x1080 
KeyboardPowerCaseMouse
Microsoft Sidewinder X4 Corsair HX750 Modded Corsair Carbide 500R Logitech M500 
  hide details  
Reply
Daily
(16 items)
 
  
CPUMotherboardGraphicsRAM
i7 2600K @ 4.8GHz, 1.4V Maximus IV Extreme GTX 560 DCII TOP 4x4GB Kingston HyperX 1866MHz CL11 
Hard DriveHard DriveCoolingCooling
Kingston HyperX 3K 120GB Samsung 640GB Thermochill PA120.2 Jingway DB-1 Pump 
CoolingCoolingOSMonitor
2x Kaze Jyuni 1900RPM EK Supreme HF Copper plexi Arch Linux x64 Acer X223HQ 1920x1080 
KeyboardPowerCaseMouse
Microsoft Sidewinder X4 Corsair HX750 Modded Corsair Carbide 500R Logitech M500 
  hide details  
Reply
post #3 of 4
+1

Usually the main reason to use a thumbnail is to reduce load times of pages. If you just re sized the picture, you would be defeating the purpose. I wouldn't worry about there being two picture files as much as I would the load time of the page. thumb.gif
The Donbot
(12 items)
 
Crushinator
(10 items)
 
Lenovo T450S
(6 items)
 
CPUMotherboardGraphicsRAM
i5 2320 Asrock H61M-VG4 EVGA GTX 970 8gig Samsung LowPro 
Hard DriveMonitorKeyboardPower
Samsung 840 Evo 250gb/WD Black 640gb Asus 24 inch (1080p) Sades Mechanical w/blues Rosewill Hive 550 
CaseMouse
Apevia X-ENERQ Pink Logitec G100s 
CPUMotherboardGraphicsRAM
i5 5300u @ 2.90 Lenovo HD Graphics 5500 12 gigs 
Hard DriveOS
Samsung 250g SSD Windows 10 
  hide details  
Reply
The Donbot
(12 items)
 
Crushinator
(10 items)
 
Lenovo T450S
(6 items)
 
CPUMotherboardGraphicsRAM
i5 2320 Asrock H61M-VG4 EVGA GTX 970 8gig Samsung LowPro 
Hard DriveMonitorKeyboardPower
Samsung 840 Evo 250gb/WD Black 640gb Asus 24 inch (1080p) Sades Mechanical w/blues Rosewill Hive 550 
CaseMouse
Apevia X-ENERQ Pink Logitec G100s 
CPUMotherboardGraphicsRAM
i5 5300u @ 2.90 Lenovo HD Graphics 5500 12 gigs 
Hard DriveOS
Samsung 250g SSD Windows 10 
  hide details  
Reply
post #4 of 4
You would be better off spending your time looking for an automatic offline batch image resizer smile.gif
Daily
(16 items)
 
  
CPUMotherboardGraphicsRAM
i7 2600K @ 4.8GHz, 1.4V Maximus IV Extreme GTX 560 DCII TOP 4x4GB Kingston HyperX 1866MHz CL11 
Hard DriveHard DriveCoolingCooling
Kingston HyperX 3K 120GB Samsung 640GB Thermochill PA120.2 Jingway DB-1 Pump 
CoolingCoolingOSMonitor
2x Kaze Jyuni 1900RPM EK Supreme HF Copper plexi Arch Linux x64 Acer X223HQ 1920x1080 
KeyboardPowerCaseMouse
Microsoft Sidewinder X4 Corsair HX750 Modded Corsair Carbide 500R Logitech M500 
  hide details  
Reply
Daily
(16 items)
 
  
CPUMotherboardGraphicsRAM
i7 2600K @ 4.8GHz, 1.4V Maximus IV Extreme GTX 560 DCII TOP 4x4GB Kingston HyperX 1866MHz CL11 
Hard DriveHard DriveCoolingCooling
Kingston HyperX 3K 120GB Samsung 640GB Thermochill PA120.2 Jingway DB-1 Pump 
CoolingCoolingOSMonitor
2x Kaze Jyuni 1900RPM EK Supreme HF Copper plexi Arch Linux x64 Acer X223HQ 1920x1080 
KeyboardPowerCaseMouse
Microsoft Sidewinder X4 Corsair HX750 Modded Corsair Carbide 500R Logitech M500 
  hide details  
Reply
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 › Trying to create a popup window of a specific size