How can I remove an image being shown by JS? - javascript

I've asked this question before:
How can I replace an image being shown via JS?
While I received an answer, it partially helped me. I was able to override the image being shown from the JS in chrome and safari but in firefox I am still getting the image being shown by JS and my own image that I want to override.
Based on the answer I got in that other question, here's the updated code:
<a class="wanelo-save-button" href="//wanelo.com/" data-url="" data-title="" data-image=""
data-price="">
<img src="http://i.imgur.com/CKibmqj.png" />
</a>
<script async="true" type="text/javascript" src="//cdn-saveit.wanelo.com/bookmarklet/3/save.js"></script>
http://jsfiddle.net/VCG8c/3/
Example: http://www.abercrombie.com/shop/us/womens-new-arrivals/jorie-shirt-2255074_03
On this page in the bottom right you'll see the icon i have. I want to do it like that but can't seem to figure out how to do it right.
I want the square icon to show and not the button behind it. The link should still work. I am new to all of this and I am puzzled. Can any of you just point me in the right direction. What should I do to hide that button?

Add this to your CSS stylesheet:
.wanelo-save-button{
background:none !important
}
This will prevent the background change from their script.
I tried this JSFiddle in Firefox and it works fine.

Related

Image Thumbnail Load behaviour (Pretty Photo Lightbox functionality preferred)

I'm trying to make a picture portfolio like the first demo example on this page http://www.no-margin-forerrors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto . However, instead of have it invoke an image when clicked it takes me to another page, I'd like it to have a pop up image instead. I had already checked possibilities in theme settings but none available.
This is the link http://tile.johnzuh.com/unsere-fliesen/ to the Page with this behaviour. You will realise that once u click on the gallery image item it sends you to another page using this
<a itemprop="url" class="eltdf-pli-link" href="http://tile.johnzuh.com/portfolio-item/home-interior-2/" target="_self"></a>
linked element to image. This is an unexpected behaviour
How it should behave
I would appreciate a behaviour similar to that on this page instead http://tile.johnzuh.com/portfolio-item/plava-identity-design-4/
Once you click on an image it should invoke a bigger image from thumbnail.
I see it uses
<a itemprop="image" title="portfolio-single-13" data-rel="prettyPhoto[single_pretty_photo]" href="http://tile.johnzuh.com/wp-content/uploads/2016/09/portfolio-single-13.jpg">
<img itemprop="image" src="http://tile.johnzuh.com/wp-content/uploads/2016/09/portfolio-single-13.jpg" alt="s" />
</a>
It uses the prettyPhoto element instead of linking to the href. How do i adopt this ? Some quick workarounds, examples will be appreciated.
Issue was solved by changing some dynamic settings in theme.

show and hide Javascript (display:none) issue

I have created a show/hide javascript function which seems to work perfectly - When you click on the link it reveals the gif version of the logo.
The issue i'm having is when you first go onto the landing page click here you can see both images, it's only when you click on the still image the function works the way is should - only displaying one image at a time. Does anyone know how i can resolve this problem?
You'll have to give the image a display:none style as well to start with:
<img id="center-img-gif" alt="main-img" src="css/images/logo.gif" style="display:none;">
use CSS property Display:none; for one of the images.
You can set display:none of one image at design time
OR
You can set display:none of one image on body onload

Shadowbox(Image gallery plugin) shows black window only

I'm trying to create an image gallery using Shadowbox plugin(http://www.shadowbox-js.com).
So I got a problem with creating the gallery, That problem is: whenever I click on the link(actually thumbnail) that displays the image it starts loading then no image is displayed only a black window.
The links I use:
<img src="http://localhost/myProject/thumbnails/10.jpg" class="thumbnails"/>
The script/link/init :
These imports are working, I verify it by using(in Chrome) Inspect element->Network.
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
notes:
1-I'm using Shadowbox as a jQuery plugin(NOT standalone).
2-jQuery is imported to my website using Google(NOT locally).
3-The real image size is 3000x2400.
Edit:
4- I realized that when right clicking->inspect element(in chrome) , the image is shown(but not in a proper way, only half of it is shown).
5-when setting handleOversize to drag the image is shown(Must click).
6-It is working in IE 9!.
You're saying that the image is not showing properly in the browser?
It may mean that the file is corrupted. Try re-saving it.
I've been using Shadowbox for quite long time now and similar problems were always caused by bad files or the files permissions not been set properly.
Since your providing an example that is local host, I can only offer general guidance and not tell you exactly what the problem is. A link surely would be welcomed.
First, make sure your call to jQuery is before the call to shadowbox.js file.
Other than that I'm sure you've given the webpage a valid !DOCTYPE which makes your Shadowbox markup correct so far as I can see at this point.
The problem could be with using jQuery and your Class Name of thumbnails.
If jQuery has modified the link with a particular style, Shadowbox may be subject to any changes in it's anchor tag.
Those changes then will cause the Shadowbox per link element to not see the original link since it's now a jQuery link. It will need to be re-cached by Shadowbox.
Solution: Try making the call to Shadowbox.init after any modifications to the thumbnail have been completed so Shadowbox caches the link once, or if needed use Shadowbox API .clearCache(); and .setup(); to re-cache those rel anchors.
I should also mention that you should ensure Shadowbox has the jQuery Adapter interface which is a download option or WordPress Plugin option.
I found the solution, It wasn't in the DOCTYPE or the browser or even my JS code!
The problem was in the CSS.
Setting the direction to right to left(rtl)(yes, the website is Arabic).
caused the images to be hidden, maybe, because the image went right and I cant see it.
It's an old question but no one answered correctly to this subject.
solution is here:
just replace "left" values with "right" and "right" values with "left" in shadowbox.css
Open the shadowbox.css and set direction:ltr for #sb-container

Append Image Tag to DOM, No Image Displayed

I am building a site with infinite scroll, and when I append images to the bottom of a DIV, they do not show up.
I am basically appending a tag like <img src='test.png' /> why would these images not show up? Do I need to preload them? If so, how would I go about doing so?
EDIT: Here is the page where it is happening: http://campus-meme.com/ - try to scroll to the bottom; images get added to the DOM but never show up.
Just took a closer look at your site.
The problem is, that the parent div of the image has a css style 'display:none'. If i delete this in the debugger, i can see the picture.
It get's this from the mosaic-backdrop class.
I just opened the site with chrome. I get several errors in the debugger console. Please check them.
For example you seem to have forgotten the $ in line 67 of your site.

Javascript image slideshow - mouseover

I am having a hard time searching for the answer to my problem. Mainly because I have no idea how to ask it in a google/yahoo search.
My site: http://www.wbsnightout.com/sidekick
On the right side I have three sponsor ad div's with images rotating. Each image has a title and is a clickable link. The only problem is, is that when you mouse over the image, the LINK and TITLE for the image BEHIND the shown image comes up. When I click on it, it takes me to the wrong link, because it's the link for the image behind it.
Here is an example of my HTML:
<div id="right-sponsor"> <!-- Begin right Sidebar -->
<div class="advertiseSlides" id="sponsor2">
<a title='Click for more Info!' href='http://www.ricochetsrapiddetail.net/' target='_blank' rel='nofollow'><img src='/images/advertise/ricochet_ad.jpg' alt='Ricochet's Rapid Detail' title='Ricochet's Rapid Detail' height='200' width='240' />
</a> </div>
This is pulled dynamically using php and mysql.
I have this before my closing body tag within a script tag
initImageGallery('sponsor1', 5000);
And my javascript file can be found: http://www.wbsnightout.com/sidekick/js/slideshow.js
I don't know much about javascript so I just used I script that I found online.
If you can answer or point me to a discussion or tutorial, that would be great!
Thanks,
You need to put this (add 'z-index:9999;' to .advertiseSlides img in css

Categories

Resources