I'm creating a one page responsive portfolio site in Wordpress based on the Foundation framework by Zurb. I'm not happy with the Clearing lightbox included in the framework, so I'm trying to include a different lightbox for images/videos (currently using Magnific Popup [http://dimsemenov.com/plugins/magnific-popup/documentation.html], but I've tried a few different plugins, including Fancybox, Colorbox, and the Responsive Lightbox plugin from dFactory).
I have a custom post type called Projects. All of the projects get displayed on the one page website, and when the user clicks on a project to see more information, the_content gets called and loaded into a div dynamically via Ajax (similar to the way portfolio projects work in the SimpleKey Wordpress theme [http://themeforest.net/item/simplekey-one-page-portfolio-wordpress-theme/3729774]).
I can get the lightbox to work on the single.php page if I manually navigate to it (ex. http://www.aisle7Studios/project/project-name/), however when I'm on the main one-page site, I can't get the lightbox to work. I know this is because the content is being loaded dynamically via Ajax, but I can't seem to get it to work. Ideas?
This is the Javascript that loads the portfolio posts, located in header.php
<!-- Items for loading portfolio posts without refreshing -->
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({cache:false});
$("h6 a").click(function(){
var post_id = $(this).attr("rel")
$("#singlePortfolioPost").html("loading...");
$("#singlePortfolioPost").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/portfolio-item/",{id:post_id});
return false;
});
});
</script>
<!-- End Portfolio Post load-->
This is the div where the post content gets loaded, located on the Portfolio page.
<div id="singlePortfolioPost" class="large-12">
</div> <!-- .singlePortfolioPost -->
The content loads fine, and upon examining the code, I can see that the plugins that automatically add rel="lightbox" to anchor tags work the way they're supposed to. However the lightbox plugins just don't work...they simply take me to the media file I clicked on.
Related
So I’m quite new to WordPress developing and I’m trying to implement MixClouds API into this website. I’ve managed to make the images load the Mixcloud URL via custom fields in WordPress. When you click on an image, it will load the song into the MixCloud widget that is I have inserted into the function.php of the theme.
https://gamma.itmotr-radio.com/shows
That part works perfectly. Which took me a while, but now the part that I can’t figure out. The script for the Mixcloud Widget needs to be on the entire site. But since the script is loaded, and you want to go to another page, the widget will keep playing (which is good!!) but the page itself stays totally black, none of the pages codes will load, but the widget is still there.
I think this has something to do with the script, and that it stop loading the page itself after the script is loaded. Can someone help? I also tried to put the script in one of the .PHP files like footer.php and header.php. but this doesn't help as well.
— MixCloud Script —
<script src="//widget.mixcloud.com/media/js/widgetApi.js" type="text/javascript">
</script>
<script src="//widget.mixcloud.com/media/js/footerWidgetApi.js" async>
{"feed": "/itmotr-radio/"}
</script>
loads the URL from
<div ... data-mixcloud-play-button="<?php
echo get_post_meta($post->ID, 'mixcloud-url', true);
?>"></pr>
which can be found in the blog/shows page of the website.
If anyone knows how to make the WordPress page loading work again, while this script is still there, please let me know :)
Using UI-Router the main page loads 2 other pages within them.
Index --> loads CSS and JS (including "application.js") with a <ui-view> to Navigation
Navigation page --> has navigation HTML with another <ui-view> to Content
Content
So basically Index > Navigation > Content
The Index is loading "application.js" with <script src="application.js"> at the bottom of the page. it contains all the page functionality.
It's loading successfully as I put an alert in the window.load function to make sure.... but what I'm finding is that I think the code in there is not reaching the other 2 embedded pages
The code works successfully if I put all the code and combine them together from the Index, Navigation, and Content into one single page. But not when separated but embedded together.
I tried putting:
<script src="~/assets/js/application.js"></script>
at the bottom of the Layout and Content but still didn't work..I'm guessing because technically it's loading as one page? but it's not really one page?...
HOWEVER if I copy and paste everything within application.js into the Layout and Content.. it WILL work.
That's such a crappy way of doing it though. How can I get this to work properly?
Morning,
I have an affiliate external widget i need to place on a page in wordpress.
The official code i have been given loads external content within this page.
<script type="text/javascript" src="http://www.convert.co.uk/widget/mobiles.js"></script>
where you place the line of code is where the external content is displayed.
This works perfectly on a non-wordpress site.
Once loaded the content uses some jquery effects and ajax to swap the results.
If i add this code within a wordpress page, it loads the content fine but the jquery within the external content does not work.
many thanks.
I do not have access the external code to change.
In the backend in the widget screen, drag and drop the text widget in the place where you need to display this external widget. Now, just add the code you have to that text widget and save it. You should now see your widget on the front end
While creating a website using Twitter Bootstrap's carousel, it seems that some scripts are interfering from it auto-sliding when the website is loaded. But it works fine once you click one of the controls in the carousel. It then slides every 5 seconds, the default time.
I'd rather not post a jsfiddle because of the size, so the production website will have to do (not sure if this is against the rules - otherwise I'll delete it).
Now there are some plugins I'm using (Newsletter and Contact Form 7) which also include scripts from jQuery. I'm not sure how to implement the noconflict from jQuery, or if it will even help.
Can anyone spot the problem?
I got this working by saving a copy of your site to my local drive, I moved the bootstrap .js file to the bottom of the file right above </body> and called the carousel manually so it ends up looking like this
<script type="text/javascript" src="./PRO-Intermediair Your Next Step!_files/bootstrap.min.js"></script>
<script type="text/javascript">
$('.carousel').carousel();
</script>
</body></html>
edit
I posted a copy so you can see http://tctel.com/pro/
I am creating a web app using bootstrap by twitter. The app contains of a page which loads up another page of the same domain in an iframe. Now my problem is, if the page that I am loading in iframe also contains bootstrap.js file it starts conflicting with the app.
For example, my app has a accordion (collapse) http://twitter.github.com/bootstrap/javascript.html#collapse built using the data attributes.
Once a page with bootstrap.js is loaded the collapse event starts getting fired twice.So something like
<head>//Bootstrap css and js files included</head>
<body>
<div>
//Collapsible Menu #1
</div>
<iframe>
<head>
//BootStrap.js script from same location as parent
</head>
<body>
// Another Collapsible Menu #2
</body>
` </head>
</iframe>
</body>
Here when I try to click on Menu #1, the code of Bootstrap.js gets triggered twice which ends ups in showing and then hiding the menu.
But my problem is not just limited to the menu. I need to be able to use bootstrap.js in my app and also allow pages which already contain bootstrap.js to be loaded inside the iframe.
Is there a way around this or am I doing something wrong?
found the problem.. it was very specific for my app. The way it was working was - there was an included JS file to trigger the app inside the "target" webpage. The JS file would not remove everything from the page and build an iframe to put load the content of the "target" inside iframe. Now in this case, I had BootstrapJS running before the app.js file which in turn resulted in getting executed in the "parent" frame and then when the app loads it was getting reloaded causing the conflict (or multiple events due to multiple inclusion).
I had the same issue in IE9 only.
I was opening an instance of my website in an IFRAME dialog. Meaning that there was 2 instances of Bootstrap, like above.
When I moused out of the IFRAME it resized the underlying layout to match that of the width of the smaller one in the IFRAME.
To get round it I had to disable the opening pages bootstrap-responsive.js stylesheet using javascript. You can then turn it back on, when you close the IFRAME dialog.
if(navigator.userAgent.indexOf("Trident/5")>-1){
window.parent.document.getElementById("responsiveCSS").sheet.disabled = true;
}
Horrible hack, I know.