Drupal 8 and colorbox - javascript

does anybody has a practical experience with setting up the Colorbox in Drupal 8? I'm trying to have the "common" functionality so after I click the image thumbnail it will be opened withing overlay Colorbox window.
I have installed everything I'v found related to the Colorbox but no success.
In the page code I can see:
<a href="/path/to/img.jpg" class="colorbox">
Also set of the colorbox related JS files:
<script src="/core/assets/vendor/jquery/jquery.min.js?v=2.1.4"></script>
<script src="/libraries/colorbox/jquery.colorbox-min.js?v=8.0.5"></script>
<script src="/modules/colorbox/js/colorbox.js?v=8.0.5"></script>
<script src="/modules/colorbox/styles/plain/colorbox_style.js?v=8.0.5"></script>
<script src="/modules/colorbox_inline/js/colorbox_inline.js?o3m4ww"></script>
<script src="/modules/colorbox_load/js/colorbox_load.js?o3m4ww"></script>
All files are at the location as stated in src attributes above. Also Firebud doesn't show any JS related issue.
But if I click that A element the image is loaded as a new page without any Colorbox overlay :(
Thanks

So finaly - thanks to comments from Aram Boyajyan who pointed me to check the other themes where it worked, I've realized I should go back to school. Or at least back to good old times where were no CMSes or frameworks and we were supposed to pass the code throught the w3c validator to proudly display that cool icon about our site compliance ;-)
If I'd do that once I've updated each template file it would save me 3 nights of investigation.
So to summarize - due to missing some of the closing div elements Colorbox were not able to update corresponding elements properly and therefore were not working as expecte.
That's it.

Related

jQuery .load not loading button

I've been trying to load a button from another page onto my page using jQuery. I've been following theinstructions detailed in the following url and havent beeen able to get it to work. I am still a bit new to jQuery so i may have small mistakes. Anything will help. iframe to Only Show a Certain Part of the Page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script> $("#m").load('https://www.minds.com/theantimedia .minds-subscribe-button');
</script>
<div id="m"></div>
Update: I've been running it by opening it from an html file in my browser. I dont know if its like php and wont work. Also if i've broken any rules by posting this please warn me and i'll delete this question. Thanks!

Image Slider is not loading correctly

On my webpage there is supposed to be an image slider (carousel). My one problem is, it's not loading correctly. As you can see on my site there are 4 bullet points and 4 images next to them. Could you see if i am missing anything in terms of my files being incorrect? I will also add a link to the site where you can find my image slider, and i also added a link to my site to help on your end.
-Thanks!
My site: http://rootforsite.azurewebsites.net/
ImageSlider: http://bxslider.com/
Your javascript to init the bxSlider isn't working, it looks like you may have an errant "style" tag or something (it's trying to close a style block, the body, and the html all within your script), also make sure to include type="text/javascript" in your tag, and finally it's usually safest to do you jQuery onLoad functions like so:
jQuery(function($){
$(...).blahblah();
});
Then "$" will be scoped a bit better.
first of all you are using
<script src="myscripts.js"></script>
before loading jquery.
Please always use jquery scripts after loading jquery.min.js
also try to load the
<script src="js/jquery.bxslider.min.js"></script>
after bootstrap.js

Load a page from within an already loaded page

It seems like this should be a pretty obvious answer but I'm under pressure for portfolio and I think I may be confusing myself here. I couldn't quite find the answer that I was looking for (which I usually am able to on this site).
Basically I want to load an external page with an image into my gallery. The only catch is that the gallery itself is loaded from an external page.
I was able to successfully implement this when I put the gallery code into its own individually loading window. But when I try it with the original setup, of course, I have to delegate. I know how to set that up, it's just defining the function itself that's giving me problems (where "window" calls the div that contains the gallery on its external page):
function showPiece(show) {
window.load(show);
}
How do I "delegate" here?
Also, I wanted to make sure I figured out how to click back to the gallery as well. That wasn't working for me either for some reason. Here's what I was using (you can see on the guitar page on the portfolio2.html page):
window.on('click',"#back", function(e){
e.preventDefault();
showPage('portfolio.html');
manageNavState($(this));
});
Here's my site so you can see in detail what's going on:
Portfolio Site
And here's the other gallery page I made:
Second Gallery Page
Sorry if this is a dumb question. Thanks in advance everyone!
===EDIT===
Nevermind, my code was perfectly fine. I found out I just had to open and close with html tags in the linked image pages, which I didn't expect because I didn't have to do it elsewhere. One image is still not working, but I'll figure it out.

Colorbox code working outside of Umbraco, but not within

We are new to Umbraco and coding within it, so I thank you in advance for your patience and assistance.
In short, we created a 'test' page utilizing a colorbox pop-up to display a form. It works perfectly in the test page.
When trying to integrate the code into Umbraco, when the "Request Info" button is clicked, the form opens in a full page, and the colorbox does not display.
I would appreciate any assistance that you could provide.
Test link (working):
http://online.saintleo.edu/Colorbox/Untitled-1.html
Example of a page where the "Request Info" button (yellow on right) opens full page, and NOT colorbox:
http://online.saintleo.edu/academics/masters-programs/master-of-accounting-(macc).aspx
I've spent the entire weekend trying to find the solution, hoping to get this resolved ASAP.
Thank you in advance, I appreciate your time and assistance.
This looks like a problem with how you have implemented your script in Umbraco. Just looking through Chrome's browser inspector, I can see that your script is failing to find the colorbox objects which means that something is prevent the library from being available. This is usually because a dependent javascript library has failed.
Looking at your source code, you are loading all your jQuery libraries at the bottom of your page. This is good practice, but you have placed your a second jQuery file reference, your colorbox file references and the custom colorbox code in the head of the page.
There are several things you will need to do:
Remove the jQuery reference from the head of the page;
Move the colorbox file references to the bottom of the page, after all the other javascript file references. You can leave the colorbox CSS file reference in the head.
Move the custom colorbox code to after all the other javascript file references. I usually place this kind of code in a separate file.
Depending on your Umbraco implementation:
If you are using masterpages, use a ContentPlaceholder to allow templates to drop javascript file references into the bottom of the page;
If you are using MVC views, use a footer section to do the same

Fancybox won't load inline content

To make things easy, here's the site - http://schnell.dreamhosters.com/folio/pixelread.php View the source code all you like.
The middle button of the top bar in your browser window that says "Palette" is supposed to open up a fancybox in the middle of the screen, and that box should load into it the data inside the element with id of 'data', but it doesn't and comes up with an error message of "The requested content cannot be loaded. Please try again later." I took this example straight from the fancybox website and double-checked that all the CSS, image and JS files are in their proper place and loaded. So now I'm lost and no idea how to do/fix this.
PS - I use Google Chrome 6.0. I'll see if this happens in IE8 or Firefox.
PPS - Found a solution. I can force the HTML content that goes into a fancybox by using the 'content' property. Using that and jQuery I can easily stuff a box with whatever I want. Thanks for the help guys.
Found a solution. I can force the HTML content that goes into a fancybox by using the 'content' property. Using that and jQuery I can easily stuff a box with whatever I want. Thanks for the help guys.
I think the problem is that fancybox isn't recognizing your content as being inline (not exactly sure why, but maybe something to do with the query string in the url, since it works when that isn't present).
I would try adding the explicit type: inline to your fancybox declaration:
$("a#inline").fancybox({'type':'inline'});

Categories