Develop Reference

How to close an image that is displayed by clicking on anchor tag in Javascript?

I want to add a close button to an image that I opened in my Image gallery. I have used the 'img' tag inside the anchor tag, where it should display a particular image of full size within the same page and want to close the image and come back to the main page.
I have came across doing this solution with Jquery, Is there anyway it can be done with javascript??
index.html
<div class="image-gallery-items">
<div class="image-gallery-item">
<a href="/dist/images/myImg.jpg"
class="thumbnail">
<span class="closebtn">×</span>
<img
src="/dist/images/myImg.jpg">
</a>
</div>
<div class="image-gallery-item">
<a href="/dist/images/myImg2.jpg"
class="thumbnail">
<span class="closebtn">×</span>
<img
src="/dist/images/myImg2.jpg">
</a>
</div>

Parent site breaks design on iframed site

I just made a leaflet map, designed map popups with bootstrap and when i iframe my map in my wordpress site, the map popup breaks. I figure out its because my Wordpress use a little bit older bootstrap version what conflict some how with my maps design.
I think what breaks the popup design is this element in my wordpress page.php file
<div class="col-lg-8 col-md-12">
Because if I delete it then map works as it should but wordpress page style is broken.
my iframe code:
<iframe src="link to map" width="100%" height="680" frameborder="0"></iframe>
This is the style on popup. Sorry I know its messy because I used it in javascript file. +a[5]+ are javascript array variables.
<div class='cont'>
<div class='row'>
<div class='col-7'>
<div class='text-center'>
<h5 class='card-title text-center'>"+a[2]+"</h5>
<p class='card-text'>"+a[4]+"</p>
</div>
<br />
<div class='adrese'>
<img src='https://cdn3.iconfinder.com/data/icons/map-markers-1/512/residence-512.png' width='20'>
<span class='glyphicon glyphicon-envelope card-text font-weight-bold'>"+a[7]+" &nbsp </span>
<img src='https://cdn2.iconfinder.com/data/icons/picons-basic-1/57/basic1-011_calendar-512.png' width='20'>
<span class='glyphicon glyphicon-envelope card-text font-weight-bold'>"+a[8]+"</span>
</div>
</div>
<div class='col-md-5 float-right'>
<div class='atstarpe'>
<a href='./images/"+a[5]+".JPG' target='_blank'>
<img class='d-block ' width='130' height='87' src='./images/"+a[5]+".JPG' alt='Pirmais slaids'>
</a>
</div>
<div class='atstarpe'>
<a href='./images/"+a[6]+".JPG' target='_blank'>
<img class='d-block' width='130' 'height='87' src='./images/"+a[6]+".JPG' alt='Pirmais slaids'>
</a>
</div>
</div>
</div>
</div>
My maps popup (not iframed)
Not iframed map
Maps popup when iframed in Wordpress
Iframed map

How we can preview a video in angular JS?

I have a feature in my Angular.js app where in user can upload type of documents, pdf, image including video. I have made it possible to upload any files but I wanted to know how we can preview and play a video in angular js? My html code for viewing pdf and images is below and it is working. How do I preview and play video?
for viewing image and pdfs
<div class="col-md-12 text-center top30 nopadding">
<div class="col-md-12 pull-right">
<a target="_self" href="{$ main.record.preview.preview $}"
download="{$ main.record.preview.file $}">
<button class="btn btn-primary pull-right inline-block">
<i class="fas fa-download"></i> Download
</button>
</a>
</div>
<div class="col-md-12 pull-right top10">
<p class="inline-block pull-right">{$ main.record.preview.file $}</p>
</div>
</div>
<div class="col-md-12 top10">
<img ng-class="{'hidden' : main.record.preview.type != 'image'}" style="width: 100%"
class="img" src="{$ main.record.preview.preview $}">
<object ng-class="{'hidden' : main.record.preview.type != 'pdf'}"
ng-show="(main.record.preview.preview != undefined || main.record.preview.preview != '') && main.record.preview.type == 'pdf"
data="{$ main.record.preview.preview | trusted $}"
style="width: 100%;height: 800px"
data="{$ main.record.preview.preview | trusted $}" type="application/pdf">
<embed src="{$ main.record.preview.preview | trusted $}" type="application/pdf" />
</object>
<div ng-show="main.record.preview.type == 'others'"
class="col-md-12 text-center text-default no-preview" >
<p><i class="far fa-times-circle"></i> No Preview Available</p>
</div>
</div>

I think you want to display a preview of your video when the user clicks a 'preview' button or hovers over the video.
I an mot aware of any framework providing an automated way to do this, although it is likely that some video hosting sites provide it as a service.
The tech behind it is generally quite simple, although takes some work to implement:
a preview image or poster image is created from the video or provided with the video and this is the 'still' image displayed before you click preview or hover over it.
the original will have been previously edited edited and scenes extracted and combined into a short preview video, generally encoded at a much lower bitrate and resolution. This may be an automated editing process - e.g. selecting several seconds of the video at predefined percentages or times through the video.
this new preview video is hosted someplace, e.g. on your website, and played when the user click 'preview' or hovers over the still image.
when the user wants to play the full video they can click a 'play' button or click on the preview and the site then switches to stream the full video wherever it is hosted.

Python Selenium upload images/files when input field not visible

Background:
I administer an Amazon shop for a category that is unsupported by the Amazon bulk upload tool. The shop contains (once this question is resolved) +150 individual products with 6-9 preview images each and in 6 EU sites (huge manual upload effort).
I decided to use Selenium and my basic python skills to automate the upload.
Problem:
All works perfectly fine except for image upload. I had used this code in the past to send images into an input field:
driver.find_element_by_css_selector('input[type="file"]').send_keys('path/to/local/image')
Modifying this to fit to the image upload page in question:
driver.find_element_by_id('main_image_url').send_keys('path/to/local/image')
Returns a sea of red:
File "/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/site-packages/selenium/webdriver/remote/errorhandler.py", line 192, in check_response
raise exception_class(message, screen, stacktrace)
ElementNotVisibleException: Message: element not visible
(Session info: chrome=53.0.2785.116)
(Driver info: chromedriver=2.23.409710 (0c4084804897ac45b5ff65a690ec6583b97225c0),platform=Mac OS X 10.11.6 x86_64)
Also tried:
I have read around a bit but my knowledge of Javascript is null so I have blindly tried a few javascript snippets to make the element visible first to no avail.
driver.execute_script('document.getElementById("main_image_url").style.visibility = "visible";')
I've also read some solutions involving trying to navigate the actual dialogue window with complicated combinations of send_keys() but sound like trouble.
I'm on a Mac and using the Chrome driver.
Any tips much appreciated
HTML element of page:
<div id="main_image_url-wrapper" class="a-row a-spacing-medium input-container">
<div data-attribute-name="main_image_url"
data-image-index="0" class="a-row a-grid-vertical-align a-grid-center ilui-image-input-container image-not-selected hide-remove-button ilui-post-attribute">
<input id="main_image_url" name="main_image_url"
value="" cssClass="image-source-of-truth"
type="hidden" autocomplete="off"
/>
<div class="a-row">
<label for="main_image_url" class="label">
<span class="attribute-label-text">Main Image
<span class="a-size-base a-color-tertiary a-text-italic a-text-normal">
(required)
</span> </span> <span class="a-declarative"
data-action="a-popover" data-a-popover="{"name":"attributeHelpmain_image_url","inlineContent":"The URL where a main image of the product is located. It's important that this is supplied for all products."}">
<span class="help-icon"></span> </span>
</label>
</div>
<div class="a-row ilui-image-wrapper ilui-visualization-element">
<span class="a-declarative" data-action="image-select-main_image_url"
data-image-select-main_image_url="{}"
id="image-container-declarative">
<div tabindex="0" class="ilui-image-select-container">
<div id="image-camera-icon" class="icon-container">
<i class="icon"></i>
<ul class="a-nostyle a-vertical error-list image-error-list"></ul>
</div>
</div>
</span> <img src="" class="ilui-img-thumbnail"
/>
<div class="image-loading-overlay a-hidden">
<div class="a-section upload-progress-meter image-progress-bar">
<div class="a-meter" aria-label="0%">
<div class="a-meter-bar"
style="width: 0%;"></div>
</div> <span class="percentage"></span> </div>
</div> <span class="a-declarative" data-action="image-remove-button-main_image_url"
data-image-remove-button-main_image_url="{}">
<div tabindex="0" class="remove-image-button">
<i class="a-icon a-icon-close"></i>
</div>
</span> </div>
</div>

capture click of addThis button

I am using the addThis widget to display Facebook, Twitter, Google, Blogger, Wordpress logos on my site.
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-1324kj34h243kjh2"></script>
I would like to know of a way that I can capture when someone clicks one of the buttons for Google Analytics tracking reasons. I have attempted to add an onClick to an anchor, but this does not fire - presumably because the markup is re-written by the included JavaScript.
This is my code:
<div class="addthis_toolbox addthis_default_style">
<div class="share-icons" id="share-icons">
<span id="share-title">Share</span>
<span class="spacer"></span>
<a class="addthis_button_email left" title="Email" onClick="_gaq.push(['_trackSocial', 'addThis', 'email']);"> </a>
<a class="addthis_button_facebook left" title="Facebook"> </a>
<a class="addthis_button_twitter left last" title="Twitter"> </a>
<a class="addthis_button_google left" title="Google">
<img src="images/google.gif" alt="G" />
</a>
<a class="addthis_button_blogger left" title="Blogger"> </a>
<a class="addthis_button_digg left last" title="Wordpress"> </a>
</div>
</div>
I am using the addthis_config to report GA activity at the moment, but I wish to report to two profiles, so I am looking for a way of capturing the click as that seems like the best way around the problem.

Make sure you have that div appended on the DOM to ensure you could use events. Otherwise check liveQuery.
I haven't used addThis widget but I would try with jQuery using class name:
$.('.addthis_button_email').click(function(){
//Count it...
});
Or using a custom method in every button:
<div class="addthis_toolbox addthis_default_style">
<div class="share-icons" id="share-icons">
<span id="share-title">Share</span>
<span class="spacer"></span>
<a class="addthis_button_email left" title="Email" onClick="notifyGA(information....)"> </a>