Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Graphics, Flash and Multimedia _ Larger image on click or hover

Posted by: Boots25 Apr 18 2015, 05:57 AM

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;">

Posted by: Frederiek Apr 19 2015, 02:58 AM

Try searching for "lightbox godaddy" or similar.

Posted by: Boots25 Apr 19 2015, 04:35 AM

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?

Posted by: pandy Apr 19 2015, 06:46 AM

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?

Posted by: Frederiek Apr 19 2015, 10:12 AM

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.

Posted by: Christian J Apr 19 2015, 12:31 PM

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/8347/using-website-builder-v7

Posted by: Boots25 Apr 19 2015, 03:50 PM

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&disposition=0&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&disposition=0&alloworigin=0"></a>

Posted by: pandy Apr 19 2015, 04: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.

Posted by: Boots25 Apr 19 2015, 05:04 PM

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.

Posted by: pandy Apr 19 2015, 05:06 PM

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.

Posted by: Darin McGrew Apr 20 2015, 02:11 AM

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.

Posted by: pandy Apr 20 2015, 02:35 PM

Really? That's a pity.

Posted by: Boots25 Apr 20 2015, 04:22 PM

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!

Posted by: Boots25 Apr 21 2015, 06:47 PM

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&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="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

Posted by: pandy Apr 21 2015, 08:24 PM

Try the below. Blowing a small image up doesn't usually look good though.

CODE

Posted by: Boots25 Apr 22 2015, 03:45 PM

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

Posted by: pandy Apr 22 2015, 07:29 PM

Only if the other images are positioned too.

Posted by: Boots25 Apr 23 2015, 01:30 PM

yes they are

Posted by: Boots25 Apr 23 2015, 04:33 PM

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&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="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'">