Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Bernard West

Member
  • Content Count

    573
  • Joined

  • Last visited

  • Days Won

    2

Everything posted by Bernard West

  1. That's basically saying that there are no thumbnail images on the page. Do you actually have any images on your page?
  2. You can use the @media css query to specify a different set of css styles for different devices (i.e. via screen resolution). See - http://www.w3schools.com/cssref/css3prmediaquery.asp edit: replaced link with the correct one.
  3. replace removes the url from the browser cache. I haven't thought about this too much, but instead of window.location.replace(url);try: window.location="www.google.com"; That will keep the previous url in the cache. I'm just not sure exactly how it will interact with tryingtobehelpful's code above. Only one way to find out.. ;)
  4. I'm not 100% sure of what your question is. You can change any image you want with a hover/rollover effect. You just need to target each image. If you want each image to have the exact same hover effect, then you could probably write a javascript routine to do that. One thing to remember about my answer above... It uses javascript because the orginal image to be replaced for the OP was an animated gif. If you just have a static image, then it's best to use CSS for the hover effect. I, and others, can help you with that too. It's much easier with CSS than with javascript.
  5. It's only the first time, as after that the images are cached. But first time visitors to your site will not see a very professional effect.
  6. I don't know if the image sizes of the new images are too big, but there is a delay in the roll-over effect the first time the image loads. That's really poor form. If rowzi doesn't get back to you guys to help, post back here and I'll help you do this. edit to add: Here's a solution I did for someone else. It had to be customised a bit due to the original image being an animated gif.http://answers.squarespace.com/questions/75445/changing-an-image-block-to-another-image-on-hover-or-rollover?page=1#76481
  7. It seems to be working now, albeit with bad formatting.
  8. cont from above: Anyway, try replacing 'http://oi58.tinypic.com/2vnqq1g.jpg' in the code above with 'https://www.dropbox.com/s/dw6q5m6sj8urzh8/2vnqq1g.jpg?raw=1' and you can see the result. That's a link to the resized file on my dropbox. I'll leave that link live for a day or two, but after that I will delete it. You can either steal that image from my dropbox, or create your own so that it matches the image ratio of 700:709 (width:height).
  9. Ok, I changed the aspect ratio of the replacement image to match the aspect ratio of the original gif, and it works fine. Of course, the original gif is still being cropped, so if you want to fix that you'll have to add some white space around the top and bottom of it to make it's aspect ratio match that of the img container on your website. At which point we'll need to change the aspect ratio of the replacement image again. :) cont. below:
  10. Yeah, I'll have a look at the formatting now. Not sure if you realise, but the original animated gif is too big for the container. In the real image his hands aren't cut off, but on your site they are. Both images are being height matched to the height set in your design and that's causing the replacement image to stretch horizontally. In other words, the ratio of the image container on your site doesn't match the ratio of the images being put in there. Anyway, I'll have a look and see what I can do.
  11. Ok, I've worked out a javascript solution. It still needs a little tweaking to get the formatting of the new image right, but it's late and I'll have to get back to that tomorrow. Instead of using a CSS "hover" selector, it uses a javascript "onmouseover" and "onmouseout" instead. That overcomes the problem with the hover selector not interacting with the animated gif properly. So, you need to stick this code into the header of that specific page (page settings->advanced->page header code injection). From past experience, it might not work in the header. If it doesn't we'll need to stick it in the site wide footer injection point. To find that go to "settings" in the left hand edit menu, "advanced", "code injection" and then stick it in the "footer" section. Here's the code: <script> (function() { var imgs = document.getElementsByTagName('img'); for (var i = 0, n = imgs.length; i < n; i++) { if (imgs[i].getAttribute("data-image-id") == "5502fcb0e4b03593df0d8ed2") { imgs[i].setAttribute("id", "targetIMG"); imgs[i].addEventListener("mouseover", newImage); imgs[i].addEventListener("mouseout", oldImage); break; } } })(); function newImage() { var img = document.getElementById("targetIMG"); img.getAttributeNode("src").value = "http://oi58.tinypic.com/2vnqq1g.jpg"; } function oldImage() { var img = document.getElementById("targetIMG"); img.getAttributeNode("src").value = "https://static1.squarespace.com/static/54f25f11e4b02d9040dcf4b4/t/5502fcb0e4b03593df0d8ed2/1426259135697/BlackTie?format=1000w"; } </script> Note, if you change any of these images, you'll need to directly change this code to match the new image details. Let me know how that goes.
  12. I couldn't help myself so I had a go at it. ;) Logically the javascript I wrote works fine, but there's a problem with the mouse hover interacting with the animated gif. As the gif cycles through, the "hover" deactivates until you move the mouse again. I'm not sure that the hover will be able to work with the gif. And the gif effects the hover of all it's parent elements too, so targeting one of the container elements of the image doesn't work either. I'm at a bit of a loss as to what to try next.
  13. I had a quick look. I was hoping to be able to do this with a css trick. I can't find a way to do it with CSS, so it's going to have to be done with javascript. Apologies again, but I'm too tired to write the javascript at the moment. I'll get back to this tomorrow.
  14. Ah sorry, I forgot about this. I'll help you fix this later today. If I don't, post back here and rebuke me and I'll jump to action! :)
  15. To do this, you'll need to add some javascript to your site to target the image so it can be changed when hovered over. I'll see if I can help you with it tomorrow, unless someone else can think of a better way to do it. Just to check, what do you want to replace it with? Is it a variation of the same image, or a totally different image?
  16. Here's a start on this. Add the following code to either the css injection point for each page, or do it in the site-wide css (but note, it will affect all checkboxes on your site, if there are others outside of those forms). <style> .option{ display:inline; padding-right: 20px; line-height: 1.5em; } .title{ padding-bottom: 6px; } </style> That gets them listed horizontally instead of vertically, but they look a little messy. I'm not sure on the best way to format them from that point on, but perhaps someone else has some ideas.
  17. Please provide a link to your site so we have something to work with. There's various ways to do this, depending on what element you want to change and how it has been set up.
  18. You probably made a mistake in the syntax when entering it. Try doing it again, and if the problem occurs again, leave the code there so I can inspect your site to see what might be going wrong. But you need to hurry. I'm off the internet in about 2 days.
  19. I meant to add, you can add transition effects to smooth in and out the inversion of colours.
  20. In amongst all the other tricks and code provided, I worked with Bryson via email to do an "invert" effect on his contact page. Very simple, but I didn't happen to find an IE work around. I have an nearly up to date IE and the effect doesn't work in there. He'll need to google, or better yet, ask at StackOverflow or the like for some code that he can append that will work with IE. Here's the invert CSS code that needs to be inserted into the header of that page: <style> .thumb-image:hover { filter: invert(100%) !important; -webkit-filter: invert(100%) !important; } </style>
  21. Ok, I've just adjusted the code and posted it in a new answer. Give it a try.
×
×
  • Create New...