How can I do to fix the jquery portfolio error? - javascript

I have a problem with the implementation of a portfolio in a single page.
The portfolio that I enter this code has
$(window).load(function() {
$('#work').flexslider({
animation: "slide",
controlsContainer: '.flex-container'
});
//Add one flexslider for project
$('#proj_slider01').flexslider();
$('#proj_slider02').flexslider();
$('#proj_slider03').flexslider();
$('#proj_slider04').flexslider();
$('#proj_slider05').flexslider();
$('#proj_slider06').flexslider();
$('#proj_slider07').flexslider();
$('#proj_slider08').flexslider();
$('#proj_slider09').flexslider();
});
Unfortunately I can not publish all the code of a website done in a single page. So if you want to see the site the link is http://goo.gl/W2Xq7 and can find the real portfolio in this link http://goo.gl/jgD3o. If you don't understand where il the problem, you can ask me the link for the source code.
Where is the problem in my site and how can I do to fix it?

You are loading jQuery more than once into page. The scond version wipes out plugins that are attached to first version. Only load jQuery.js one time, and load it before all plugins and dependent code

Related

Elements of the jQuery scripts work when going back to a page on the browser but not on refresh

I am using bootstrap script, mixitup filtering and owl carousel on a SharePoint page. For example on the owlcarousel the data shows up but the actual carousel function does not work. If i leave the page and then go back -1 everything works. It is the only time it works. When I refresh or reload it goes back to the original state.
On the mixitup filtering a similar issue happens. The data does not load initially like it should. When i leave the page and go back then it loads and functions properly.
Any ideas? Something with caching and loading order of scripts? Why would it work when going back?
Try to load the scripts in this order in the end of your body:
jQuery,
Bootstrap,
owlcarousel
Then your custom Script which initiates any own functions
After weeks of searching and deciding to post the question I found my answer so I wanted to make sure i shared.
I found a post from Chris Coyier on how to run JavaScript only after the entire page has loaded... THAT WAS IT! Once i placed my script in this it fixed my issue.
$(window).bind("load", function() {
// code here
});

lightgallery library + lg-thumbnail plugin

I'm trying to setup lightgallery with lg-thumbnail plugin in a WordPress installation.
https://sachinchoolur.github.io/lightGallery/docs/api.html
https://sachinchoolur.github.io/lightGallery/docs/api.html#lg-thumbnial
Lightgallery alone seems to work without problems (so, HTML markup and enqueued script is OK) with this JS init:
$(document).ready(function() {
$("#gallery-1").lightGallery();
});
So, my next step is to include lg-thumbnail plugin. After enqueue plugin JS I add thumbnail:true:
$(document).ready(function() {
$("#gallery-1").lightGallery({
thumbnail:true
});
});
But nothing happens. There is no errors in the console. Seems like there is no lg-thumbnail plugin present at all.
But, script is in its place:
What am I doing wrong?
How can I diagnose the problem?
Thank you!
Sorry about that, everything works fine, including thumbnail plugin. I was worng with what was the plugin function. I thought that this plugin acts on the thumbnails before lightbox was launched, but actually insert thumbnails in the lightbox after it is launched.
My apologies.

I cannot get venobox to work on my website

So I am trying to use venobox on my website so when the user clicks on a picture, a box is opened and it will display a YouTube but I cannot get it to work please help me fix what I am doing wrong.
My code: http://hastebin.com/awuxarivoj.html
Thank you in advance
your code misses venobox's css and js, and there's no plugin initialization.
I only see two links with the class "venobox". Also, youtube links should have the data-vbtype="youtube". please read the documentation
It happens because you didn't properly linked required venobox plugin files.
Download venobox plugin and link it in your html document.
Also take care of ordering of linking the plugins

Magnific jQuery image gallery plugin not working correctly only in one part of site?

I am using the jQuery Magnific image gallery plugin in two places in exactly the same way on a site. It works perfectly in one place, and is broken in the other (see the image gallery links in the sidebars)... it seems to be trying to do its thing but will not load in an overlay. Instead, it loads at the top of the window.
The gallery is being fired off like this:
jQuery(window).load(function() {
jQuery('.gallery_image_link').magnificPopup({
type: 'image',
gallery:{
enabled:true
}
});
});
The images in the gallery look like this:
<img src="/sites/default/files/styles/practice_gallery_thumb/public/small_img1.jpg">
Console in Chrome (or any other browser) does not provide any useful info. I expect that there is some kind of conflict with something else on the page... but what?
This is a Drupal site, but the Magnific library is not loading via any Drupal module. And again, works great in the first place... not so much in the second. I'm stumped!
Kids, always remember to load the associated CSS along with the Javascript on every page where it will be needed. Yep. That's what it came down to; missing CSS. Yeesh...

Deep-linking with Sammy.js?

I recently built a website using the sammy.js framework. The site includes a portfolio page with a grid of thumbnails that link to the detail page for each portfolio piece. All of this works.
What I cannot seem to figure out how to do is be able to provide someone a link to a specific project on the site (ex: www.thesite.com/#/work-detail/some-project) and have it run the work-detail route with "some-project" as the variable that gets passed for it to load the correct content.
Any help would be appreciated.
So, this doesn't work?
get('#/work-detail/:project', function() {
alert(this.params['project']);
});

Categories

Resources