Hope someone out there can possibly help - I'm using Expression Engine as the platform, and I am using Remodal (as a modal) to work alongside a gallery. The gallery page consists of multiple images in a masonry-style format, and what I am wanting is basically when the user clicks an image, the Remodal popup kicks in and shows the image in the popup. With the code below, the popup functionality is working no problem, however, the issue is, what ever image on the page you click, the first image and title displays in the popup, and not the image you expect to see (the one you click on).
From what I understand, I need to now use some Javascript in order to popup the image you click on, but I am no good at Javascript to be honest, so any help would be great.
This is the modal HTML:
{exp:channel:entries
channel="gallery"
dynamic="off"
limit="1"
url_title="{segment_3}"
}
<img src="{cf_gallery_image}" alt="{title}" />
<div class="gallery__title">{title}</div>
{if cf_gallery_copy != ""}
<div class="gallery__subtitle">{cf_gallery_copy}</div>
{/if}
{/exp:channel:entries}
So when you click any image on the gallery page, the code above displays a popup but of the first image on the page only, and not the image you expect to see.
The gallery HTML:
{exp:ce_img:pair
src="{cf_gallery_image}"
fallback_src="static/images/fabric-no-image.png"
width="360"
crop="no"
}
{/exp:ce_img:pair}
Thank you.
Mike
Related
I have jsp/javascript page which shows some of the content based on some business logic. This page loads some data that being pulled from database. Sometimes Page Load can take more time. So there is no specific time.
Things to do:
Show a popup/messagebox/dialogbox in the middle of screen after the entire page is loaded. should have close or "X" button to close.
Popup/messagebox/dialogbox is sequence of 4-5 screens/content messages. Meaning as soon as popup comes it shows 1st content, then there should be "next" or ">" sort of icon within that popup screen. clicking on that it should proceed to next screen or content. When you arrive at last content or screen, you should be able to scroll back to first message.
I have tried using https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
and https://www.w3schools.com/w3css/w3css_modal.asp.
With that I am having difficulty showing modal or carousel inside messagebox/popup/dialogbox at the middle of screen after entire page is loaded
I followed some of the questions here on stackoverflow. They cover all basic things, but not exactly this specific scenario.
If you use the W3.CSS modal, there's a little hint in their first example on this page. In the onclick attribute on the button, there's a little Javascript snippet:
document.getElementById('id01').style.display='block'
To get that behavior when the page is finished loading, you can put it into an event listener on the window object that waits for the load event MDN doc.
Here's a small example using the boilerplate from the W3.CSS modal page:
<!-- In your HTML -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span
onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">
×
</span>
<p>Where your carousel goes</p>
</div>
</div>
</div>
/*
In a <script/> tag below the rest of your imported scripts
or in a separate, linked .js file.
*/
window.addEventListener('load', function() {
document.getElementById('id01').style.display = 'block';
});
As far as the carousel, you can just replace the <p /> element inside the modal with the relevant code. I'd start by just copy/pasting the W3Schools slideshow example. Make sure you include the <link /> and <script /> required to use Bootstrap and don't forget to replace their images with yours.
If you need any more help, please include some of your code as so folks have better insight into your problem.
Take care!
I am trying to add some links in the short description area and call the pretty photo modal window that comes with woocommerce. Since I am on the product page I should not have to make any additions to the functions.php as far as I can tell, and when I put the same exact code on the regular description it works just fine, but when in the short description instead of opening up a modal it takes me to the image file page instead of having it in the modal.
When inspecting the element it appears the JS event is not on the one in the short description, but it is in the regular description. So strange any thoughts. The link is just a normal link with the photo for the href and dat-rel to indicate the prettyPhoto
<a title="My Picture 1" href="link here" data-rel="prettyPhoto">Size Chart</a>
Anyone know why this may be happening?
I have this issue and I don't know how to solve it...
When entering in my homepage, I want to popup a picture so as the visitors could see directly a new event before they enter the website. I tried it with JavaScript but I didn't make it to work.
I don't want to make a new homepage, but I want this picture to pop up over the normal homepage and when clicking the picture it will redirect you to the competition, otherwise by clicking anywhere else it will make the picture go away.
I know how to add the links but I am stacked in the JavaScript part.
If you could help me on how to pop up the picture when someone visit my website I would really appreciate it.
Create a div which contains your pop'in and use jQuery when the page load :
<div id="mypopup">
**** Somes stuff here ****
</div>
$(document).ready(function() {
$("#mypopup").show();
});
Have an image with position: absolute property. And place it wherever you want on screen (show it default)
Use jQuery library, to do the below stuff to hide it.
$('.image-class').click(function(e){
e.stopPropagation();
});
$('body').click(function(e){
$('.image-class').hide();
});
I am currently unable to display images on the Pinterest Pin Preview screen that are hidden (with a display: none) on my page. On my page where the "Pin It" button sits there is a standard carousel, but I am looking for all images within that carousel to be shown on the Pin Preview pop-up.
I have the script include on my page as below:
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#username=xa-USERNAMEINHERE"></script>
<a class="addthis_button_pinterest left last" title="Pinterest"> </a>
When investigating into this issue I came across this post from 2012, which is essentially the same issue I am experiencing. However there is no follow up to it.
I have experimented with the image_container and image_include properties of addthis_config, but essentially I can't seem to find a way to show the hidden images.
Has anyone came across this problem?
I received a reply back from Pinterest Support, as follows:
Hi,
We do offer similar functionality when using our Pin It button in
"Any Image" mode. You can see the code used to generate it by going to
our Widget Builder:
http://business.pinterest.com/widget-builder/#do_pin_it_button
However, there's no way for us to automatically include hidden images.
The one additional functionality that we do offer is picking up the
image stored in the og:image tag on your page, if it exists, so if you
populate that tag with one of the hidden images, it would show up
first in the list. Hope this helps! Bill | Developer Support Engineer
So it seems that as of May 2014 this is not possible.
I designed my own gallery which consists of a bunch of thumbnails on load, and when they are clicked on the image pops out to a bigger picture so the user can see it more clearly. On these pop out windows I have the ability to specify a URL which the user will be sent to if he/she clicks on the popped out image.
Because this whole gallery is being loaded by JavaScript, search engines will not be able to see the links that are attached to the pop out boxes. I thought about putting a text link also below the gallery thumbnails, but I think that would just make the gallery look sloppy. I have also thought about creating a hidden link, but I believe that will be ignored by the search engines and its frowned upon.
Anyone have any idea on how I can get this link to look good, and be visible by search engines?
Googlebot is able to construct much of the page and can access the onClick event contained in most tags. For now, if the onClick event calls a function that then constructs the URL, Googlebot can only interpret it if the function is part of the page (rather than in an external script).
Some examples of code that Googlebot can now execute include:
<div onclick="document.location.href='http://foo.com/'">
<tr onclick="myfunction('index.html')">new page
open new window
Put the link right around your thumbnail:
<img src="thumb.jpg" />
Bind your expand function to the link and cancel the default behavior in your javascript:
$("a.thumb").click(function(e)
{
// show the larger version
e.preventDefault();
});
You could make your thumbnails link to the bigger picture and use JavaScript to ignore that actual link and open the popup with your current functionality. The thumbnails will get indexed and the links will get spider-ed as well.
use jquery event.preventDefault(); This will prevent the link action from happening, and you can do what you want to do with javascript. This is a good way of allowing sites to work for users without javascript enabled, but adding nice features for those that do. This way, the search engines will see the link and follow it, and users will still get the rich javascript experience you are creating.
<a href="link-to-page1.html" class="thumb-link">
<img src="thumbnail1.png" alt="thumb 1" />
</a>
<a href="link-to-page2.html" class="thumb-link">
<img src="thumbnail2.png" alt="thumb 2" />
</a>
<a href="link-to-page3.html" class="thumb-link">
<img src="thumbnail3.png" alt="thumb 3" />
</a>
then in your javascript:
$(document).ready(function(){
$(".thumb-link").click(function(event){
event.preventDefault(); // cancel the hyperlink default action
// do your javascript here
});
});