Let me start by saying I'm not a web developer. I barely know enough HTML to be able to edit templates to show what I need them to show.
I have an HTML template I purchased which uses lightbox to display an image gallery. I thought it would be fine to replace the links to the images the template used with links to YouTube videos I want displayed instead. However, I have a very weird problem with the page. When viewed locally (from my hard drive copy), the videos play fine. However, when viewed online after uploading to the server, the lightbox opens up when clicked on, but stays stuck at trying to load the video. They never come up. Here's the code snippet used to display the video in my template.
<a class="c-image-overlay t-image-overlay js-lightbox" href="https://www.youtube.com/watch?v=hQtFLkwXaN8" data-lightbox-hidpi="" title="Deadalus' Last Flight" data-lightbox-gallery="portfolio">
<img src="assets/images/portfolio/orchestral_450x300_halftone_BW.png" alt="">
<div class="c-image-overlay__content">
<h3>
Orchestral
</h3>
<hr class="c-image-overlay__deco-line t-image-overlay__deco-line" />
<p>
Orchestral piece that would fit nicely as a film theme.
</p>
</div>
</a>
I can replace the code by the embed code provided by YouTube, and it works, but I lose all the layout functionality I had before (along other things).
Any help with getting this to work properly is really appreciated. Otherwise, I'll just need to replace these lightboxes with something else.
Thanks in advance!
Related
Square up provides a couple different ways to add appointment booking to an external website. I am working with a Wordpress site with Elementor using the Astra theme, and I've attempted to create a shortcode with the following snippet. What happens is that the Square appointments takes up the entire preview pane of the editor, so I can't edit the rest of the page, or even access the shortcode/remove it.
<!-- Start Square Appointments Embed Code --><script src='linkhere'></script><!-- End Square Appointments Embed Code -->
I was able to get the calendar on WordPress by just adding the URL source in an iframe, like below, but the problem is it doesn't show up on mobile (at least on Google Chrome). On desktop, a static height is needed to display properly.
<iframe
height="1800px" src="linkhere">
</iframe>
What all can I do to address these problems? I need this embedded, but I need to be able to continue making changes to the web page in the editor. I tried templating it, but it will still render, even in a template. I tried using CSS to fix the width/height, no success. :-(
Please help me!
I saw few sites that use this thing but I didn't know what is it.
I was browsing a site ansehen I tried to download the images in the page no matter what method I used to download different images came out instead of the images I saw.
So I wanted to do that on my WordPress site to protect my images from being stolen.
If anyone have any idea what is that called and how it's done please help me.
It could be a way for you to use the images as an background image and place a transparent image above. So when the user right clicks the image, he will not be able to save the image this way. Of course he can look at the code and find out the url of the background image or just take a screenshot and crop it. But this would be more effort, so your images are much better protected then without this method.
Useful link for your issue: https://www.computerhope.com/issues/ch000977.htm
I adapted a code example from this site using a div container instead of a table:
<div style="background-image:url('pictures/image.jpg'); background-size:cover;">
<img width="350" height="150" src="pictures/transparent.png" alt="copyright">
</div>
My goal is to have an image gallery page that displays images in a modal when users click on a picture and be able to view other pictures by clicking on the left and right arrows. I'm attempting to achieve this with lightbox by Lokesh Dhakar. I have added lighbox.css and lightbox.js to my laravel project and my view renders properly but when i click on an image in chromo, the image opens fully in the same tab so that i don't have that modal effect. From the console i see this warning message
Resource interpreted as Document but transferred with MIME type image/png: "http://127.0.0.1:8000/images/albums/albumImg/ckmUU5_album_image.png".
This is the first time I'm doing anything like this with laravel, so i haven't been able to figure out what I'm doing wrong. This is the code i have below
<div class="card-columns mb-5" id="albumImgs">
#foreach($album->photos as $photo)
<div class="card">
<a href="{{URL::to('/')}}/images/albums/albumImg/{{$photo->image}}" data-lightbox="photos">
<img class="card-img" src="{{URL::to('/')}}/images/albums/albumImg/{{$photo->image}}" alt="">
</a>
</div>
#endforeach
</div>
I need help figuring out what I'm doing wrong and how to achieve my goal.
I've found the solution. The issue was caused by the jquery file, bootstrap 4 ships with the jquery slim version by default and it does not have the fadeIn function. Changing the cdn to jquery.min was all i did and my goal has been achieved. I hope this helps someone out there.
I am making a games website and I have little knowledge in computer language and I need to create a lightbox that will appear when a image is click linking to this box. The box doesn't need to be too fancy or anything, all i need is for it to have an embedded flash games at a set size without scrolling. I have had a look at jquery and mootools but I find them confusing and don't know how to embed a flash based game inside them, so any help would be very useful.
PrettyPhoto jQuery makes it easy to lightbox media such as Flash.
From their example:
<a title="Flash 10 demo" href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294" rel="prettyPhoto[mixed]">
<img src="/wp-content/themes/NMFE/images/thumbnails/flash-logo.jpg" alt="Flash 10 demo" width="50"/>
</a>
Put a link to the SWF with rel=prettyPhoto[groupName] in your anchor.
Within the anchor, you may place an image thumbnail.
<a href="flash.swf" rel="prettyPhoto[group]">
<img src="thumbnail.png" />
</a>
Download source.
One simple solution that I think might be good looking would be having a container that's hidden from start. When you click at the image this container turns visible. This way you don't have to embed flash to jquery/javascript but to html.
With jquery it would look like this.
$(document).ready(function(){
$('#yourimage').click(function(){
$('#containerwithgame').show();
});
});
This way you don't use an annoying pop-up lightbox, but that's a personal opinion.
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