Help - Search - Members - Calendar
Full Version: Larger image on click or hover
HTMLHelp Forums > Web Authoring > Graphics, Flash and Multimedia
Boots25
Hi I'm using GoDaddy to build a website for my wife's business.

I'm using code to import images as it's the only way to access the title & alt attributes, however to make it mobile friendly I cant have the images to big, so on the web site wanted to enable a larger image to appear when the original is hovered over or clicked
I did find an old thread for this but one link for CSS help is out of date as the page cant be found and the other for lightbox shows a nice display but cant find anything of help, plus using GoDaddy not sure if I could use Lightbox anyway

this is the code i currently have for an image, if anybody can tell me what to add or a simple way of doing it, being new to this, i'd be really grateful

Thanks.

<img src="//nebula.wsimg.com/9dd6de6a244a6c3b0ae4fd2e5021cd78?AccessKeyId=7565527626527DFB21C5&disposition=0&alloworigin=1" title="Spaniel In The Rough" alt="Spaniel In The Rough Heathers Portraits Paintings Pets Wildlife People" style="vertical-align:middle;width:300px;height:200px;">

Frederiek
Try searching for "lightbox godaddy" or similar.
Boots25
I've tried loading Lightbox but Firefox says the file is not loaded as it may be corrupt.

This is for the js files Lightbox says to load!

Fancybox did the same, am i doing something wrong?
pandy
QUOTE(Frederiek @ Apr 19 2015, 09:58 AM) *

Try searching for "lightbox godaddy" or similar.


What's so special with GoDaddy's hosting? Is it limited somehow?
Frederiek
I know nothing about Godaddy. There seems to have been issues with jQuery in Godaddy when I searched for "jquery in godaddy", but I don't know if hat's still the case.

Maybe he should try to take a look in their support files. Or change for a better hosting service.
Christian J
Godaddy isn't just about domains and hosting, they seem to offer WYSIWYG web site building tools as well: https://support.godaddy.com/help/article/83...site-builder-v7
Boots25
thanks for the input everybody, i'm still working on it.

GoDaddy has a gallery option in which the images will open up larger when clicked, but using that option doesn't allow access to the title or alt attribute.

by looking at the code for that i have managed to get the image to open larger on a new tab, just need to see if i can get to just open larger over same page now.

unfortunately their help section isn't the greatest but there is a call them option I may have to take up

this is the code, if anybody has any ideas

<a data-fancybox-type="image" title="Caption displays here" href="//nebula.wsimg.com/d1efe41ee6cd1ddb9a3f2dd41584171d?AccessKeyId=7565527626527DFB21C5&amp;disposition=0&amp;alloworigin=1" rel="wsb-media-carousel-desktop--619617006" style="height: 150px; width: 150px; margin: 5px; display: inline-block; vertical-align: middle;" class="wsb-media-carousel-wrapper img"><img style="height: 150px; left: -37.5px;" src="//nebula.wsimg.com/d1efe41ee6cd1ddb9a3f2dd41584171d?AccessKeyId=7565527626527DFB21C5&amp;disposition=0&amp;alloworigin=0"></a>
pandy
FYI the alt attribute isn't there for spamming purposes. The alt text is replacing the image if the image, for any reason, can't be loaded.
Boots25
QUOTE(pandy @ Apr 19 2015, 10:22 PM) *

FYI the alt attribute isn't there for spamming purposes. The alt text is replacing the image if the image, for any reason, can't be loaded.


Okay thank you, I didn't realise as the SEO checks came up that they were required to achieve better search results.
pandy
There's probably a few grains of thruth in that, but it doesn't mean you should fill alt with keywords. Alt is also required for valid HTML, but for other reasons than SEO.
Darin McGrew
Actually, the last I heard, search engines started ignoring ALT text (and anything else that typical users can't see) years ago, in response to people using ALT text (etc.) to trick the search engines.
pandy
Really? That's a pity.
Boots25
having a night off from this.

I did look at using the GoDaddy Gallery feature if the need for the alt attribute isn't as great as I was led to believe, as that does do a larger image on click with caption, however there's no facility to add a PayPal button for each image.
They don't make things easy, probably so I'll call their helpdesks and they can make a bit more out of me.
I wont give up as i know it can be done!
Boots25
i've made progress using onmouse over only thing i cant get is how to make it sit on top of any other image on the same page

code is now

<img src="//nebula.wsimg.com/9dd6de6a244a6c3b0ae4fd2e5021cd78?AccessKeyId=7565527626527DFB21C5&amp;disposition=0&amp;alloworigin=1" title="Spaniel In The Rough" alt="Spaniel In The Rough Heathers Portraits Paintings Pets Wildlife People" style="vertical-align:middle" width="300" height="200" onmouseover="this.width=800;this.height=600;" onmouseout="this.width=300;this.height=200;">

if i can get that sorted i think i'll be sorted
pandy
Try the below. Blowing a small image up doesn't usually look good though.

CODE

<img src="http://nebula.wsimg.com/9dd6de6a244a6c3b0ae4fd2e5021cd78?AccessKeyId=7565527626527DFB21C5&amp;disposition=0&amp;alloworigin=1" title="Spaniel In The Rough" alt="Spaniel In The Rough Heathers Portraits Paintings Pets Wildlife People" style="vertical-align:middle" width="300" height="200" onmouseover="this.width=800;this.height=600;this.style.position='absolute'" onmouseout="this.width=300;this.height=200;this.style.position='static'">
Boots25
That enlarges okay but doesn't go on top of other images, i did find reference to z-index, is that required?

thanks for your help
pandy
Only if the other images are positioned too.
Boots25
yes they are
Boots25
I've tried all sorts of variations to add the z-index=1 with no joy, in fact all the ways I've tried stopped it enlarging at all
also noticed image expands from top left corner of original, using top & left would I be able to ensure it comes on the visible screen

sorry if I'm asking to much but I am trying to search for snippets of code that may help as well as just sitting here

my latest failed code with z-index=1 incorporated

<img src="http://nebula.wsimg.com/9dd6de6a244a6c3b0ae4fd2e5021cd78?AccessKeyId=7565527626527DFB21C5&amp;disposition=0&amp;alloworigin=1" title="Spaniel In The Rough" alt="Spaniel In The Rough Heathers Portraits Paintings Pets Wildlife People" style="vertical-align:middle" width="300" height="250" onmouseover="this.style.position='absolute';this.style.z-index='1';this.width=800;this.height=600" onmouseout="this.width=300;this.height=250;this.style.position='static'">
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.