Develop Reference

js-lightbox can't play YouTube video in HTML template. Stuck loading

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!

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.

How can I remove an image being shown by JS?

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.

I'm attempting to build a Jquery Image carousel that changes the content of a seperate div on the page.

I've been messing around with a ton of different attempts none of which have proved even remotely successful. If someone is willing to, would you either walk me through or point me in the right direction.
I'm using http://sorgalla.com/projects/jcarousel/ Jcarousel as the image carousel on the top of the page with 3 images up at a time.
I'm looking for something like this following link http://tamarackcellars.com/ but where the content at the bottom of the page changes instead of the whole page loading to a new page when you click on one of the wines.
Any help would be greatly appreciated.

ok I am assuming you can get the carousel plugin to work, if not let me know.
If I understand you right, you want the content of the page to change but not to redirect. If this is static content then what you want is relatively simple and can be solved many ways.
First set up your carousel and give each image or content the same class like class="carouselObj". Then create a container on the same page that will hold different information with respect to each element of the carousel.
<div id="container">
<div class="info">1st image info</div>
<div class="info">2nd image info</div>
<div class="info">3rd image info</div>
<div class="info">4th image info</div>
</div>
Now to add some jquery to make it functional.The idea here is that when one of the images changes via click or from a timed event, the corrosponing information in the container will also change. Here is some code to give you the idea.
$('.carouselObj').click(function(){
var index = $('.carouselObj').index(this); // gets the index of carousell image clicked
$('.info').eq(index).show().siblings('.info').hide(); // shows the corrosponding element and hides the others.
});
Now in the css file you need to make sure you originally set the first info class

I need help making a lightbox with a flash game embedded inside it

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.