The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Larger image on click or hover, I'd like a bigger image to appear when original is clicked or hove
Boots25
post Apr 18 2015, 05:57 AM
Post #1





Group: Members
Posts: 9
Joined: 18-April 15
Member No.: 22,503



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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 19 2015, 02:58 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Try searching for "lightbox godaddy" or similar.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Boots25
post Apr 19 2015, 04:35 AM
Post #3





Group: Members
Posts: 9
Joined: 18-April 15
Member No.: 22,503



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 19 2015, 06:46 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
Joined: 9-August 06
Member No.: 6



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 19 2015, 10:12 AM
Post #5


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 19 2015, 12:31 PM
Post #6


.
********

Group: WDG Moderators
Posts: 7,893
Joined: 10-August 06
Member No.: 7



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Boots25
post Apr 19 2015, 03:50 PM
Post #7





Group: Members
Posts: 9
Joined: 18-April 15
Member No.: 22,503



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 19 2015, 04:22 PM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Boots25
post Apr 19 2015, 05:04 PM
Post #9





Group: Members
Posts: 9
Joined: 18-April 15
Member No.: 22,503



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 19 2015, 05:06 PM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 20 2015, 02:11 AM
Post #11


WDG Member
********

Group: Root Admin
Posts: 8,275
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 20 2015, 02:35 PM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
Joined: 9-August 06
Member No.: 6



Really? That's a pity.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Boots25
post Apr 20 2015, 04:22 PM
Post #13





Group: Members
Posts: 9
Joined: 18-April 15
Member No.: 22,503



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Boots25
post Apr 21 2015, 06:47 PM
Post #14





Group: Members
Posts: 9
Joined: 18-April 15
Member No.: 22,503



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 21 2015, 08:24 PM
Post #15


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
Joined: 9-August 06
Member No.: 6



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'">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Boots25
post Apr 22 2015, 03:45 PM
Post #16





Group: Members
Posts: 9
Joined: 18-April 15
Member No.: 22,503



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 22 2015, 07:29 PM
Post #17


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,986
Joined: 9-August 06
Member No.: 6



Only if the other images are positioned too.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Boots25
post Apr 23 2015, 01:30 PM
Post #18





Group: Members
Posts: 9
Joined: 18-April 15
Member No.: 22,503



yes they are
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Boots25
post Apr 23 2015, 04:33 PM
Post #19





Group: Members
Posts: 9
Joined: 18-April 15
Member No.: 22,503



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'">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th September 2018 - 07:53 PM