Larger image on click or hover, I'd like a bigger image to appear when original is clicked or hove |
Larger image on click or hover, I'd like a bigger image to appear when original is clicked or hove |
Boots25 |
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;"> |
Frederiek |
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.
|
Boots25 |
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? |
pandy |
Apr 19 2015, 06:46 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
|
Frederiek |
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. |
Christian J |
Apr 19 2015, 12:31 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,722 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
|
Boots25 |
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&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> |
pandy |
Apr 19 2015, 04:22 PM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 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.
|
Boots25 |
Apr 19 2015, 05:04 PM
Post
#9
|
Group: Members Posts: 9 Joined: 18-April 15 Member No.: 22,503 |
|
pandy |
Apr 19 2015, 05:06 PM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 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.
|
Darin McGrew |
Apr 20 2015, 02:11 AM
Post
#11
|
WDG Member Group: Root Admin Posts: 8,365 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.
|
pandy |
Apr 20 2015, 02:35 PM
Post
#12
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
Really? That's a pity.
|
Boots25 |
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! |
Boots25 |
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&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 |
pandy |
Apr 21 2015, 08:24 PM
Post
#15
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 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&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;this.style.position='absolute'" onmouseout="this.width=300;this.height=200;this.style.position='static'"> |
Boots25 |
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 |
pandy |
Apr 22 2015, 07:29 PM
Post
#17
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
Only if the other images are positioned too.
|
Boots25 |
Apr 23 2015, 01:30 PM
Post
#18
|
Group: Members Posts: 9 Joined: 18-April 15 Member No.: 22,503 |
yes they are
|
Boots25 |
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&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'"> |
Lo-Fi Version | Time is now: 21st September 2024 - 06:25 AM |