How to implement justified gallery in blogger? - javascript

Hello amazing people in here!
My Goal: Display a Bunch of images neatly on
http://1110kd.blogspot.in/
using Justified image gallery by Miro (http://miromannino.github.io/Justified-Gallery/)
Progress till now:
step 1: Pasted JS files in head section
step-2: tried to post images in a post, also tried to use a HTML widget to imbed the images
Now I tried to paste the remaining code at various locations in the template as well as widget, but no success :(
Now looking around for a fix. I am okay with any solution by which I can showcase a responsive image gallery on my blog (Only gallery, nothing else).
[due to inability of self hosting due to various reasons, I am basically trying to convert the blogger in a single page image gallery]
Thank you so much in advance.

Firstly Down load "justifiedGallery.min.css" and "jquery.justifiedGallery.min.js" then follow this URLhttps://jsfiddle.net/AwadheshVerma/uy0d41f2/

First, when I try your link, the first thing I see is the following image.
You have to fix this before trying to do something else.
A possible solution will be to use a CDN instead.
So to resume, here's a possible template:
<!DOCTYPE html>
<html>
<head>
GooglebaseData goes here ...
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.3/css/justifiedGallery.min.css" />
</head>
<body>
All your content
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.3/js/jquery.justifiedGallery.min.js"></script>
<script type="text/javascript">
$("#basicExample").justifiedGallery();
</script>
</html>
With blogger, you have to put all your scripts like jquery and script which need it to be between </body> and </html>

Related

Image cannot be loaded. Make sure the path is correct and image exist

SO my file hierarchy that is the same on my desktop as it is in my web-host file manager
1- This is my iframe from my code editing program (Adobe Edge Code) correctly working when I throw the page up in Google Chrome]
2- And this is my iframe not working when I have the page hosted in my web-hosts file manager.
1: https://pantherfile.uwm.edu/leyton/Screen%20Shot%202013-12-20%20at%203.51.37%20PM.png?uniq=-n0ztwi
2: http://leytonelizabeth.com/photography.html
I don't know anything about Javascript and definitely nothing about JQuery. All I know is that I have a code that correctly displays my website when I preview it on Google Chrome.
When I put all my files in the exact same hierarchical order in my web-hosting site's file manager, I navigate to it and it doesn't work.
Why does it point to the files and paths correctly when it's coming from my desktop and not when it's coming from Webhostinghub.com?? I transferred them over in exactly the same order. The paths are correct. So it must be something with jQuery. Can anyone give me some advice or things to try in order to get the iframe to display my photos?
Is it perhaps because there are several Core Scripts being referenced at the top of my photography.html page? do I need to update/download each version? Do viewers looking at my site need to go through all that too then just to potentially see the photos in my iframe? As you can see in the pic of the photo that properly works in the iframe, it points to the prettyPhoto jQuery and its respected gallery, not some other url..
I have NO IDEA what to do about this. Please help!!!
These are the scripts at the top of all my html5 documents/pages:
`<!-- Cufon Scripts -->
<script src="js/libs/cufon-yui.js" type="text/javascript"></script>
<script src="js/fonts/mank-sans.cufonfonts.js" type="text/javascript"></script>
<script src="js/fonts/Yanone_Kaffeesatz_Regular_400.font.js" type="text/javascript">
</script>
<script src="js/royale-cufon.js?v=1" type="text/javascript"></script>
<!-- Core Scripts -->
<script src="js/libs/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="js/libs/mdetect.min.js" type="text/javascript"></script>
<script src="js/libs/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script src="js/libs/jquery.easing.1.3.min.js" type="text/javascript">
</script>
<script src="js/royale.js?v=1" type="text/javascript"></script>
<!-- Bg Image Script -->
<script src="js/royale-bg-image.js?v=1" type="text/javascript"></script>
<!-- Added for Lightbox Script -->
<script src="js/libs/jquery.pretty-photo.min.js?v=1" type="text/javascript"></script>
<!-- Setup Script -->
<script type="text/javascript">`
1 Lots of your 'thumb' folders are empty.
2 The "big-sized" picture of teacup (the only thumb picture i can see) is referred as "img/portfolio/theaccident/tea.jpg", but the real file path is "img/portfolio/theaccident/Tea.jpg" (the capital letter matters)
So the problem is not in the scripts, It's in your export settings or your host defaults.
UPD:
3 Some links from your 'thumbless' pictures are pointing to correct 'big-sized' pictures (their first letters are not capitalized).
You definetely did something wrong when moving everything from desktop to host.

My embedded Javascript is not displaying on an html canvas and I would like to know the structure for this in the future

I apologize as I am a relative beginner to programming, especially for the web. I am currently try to utilize the videos from code player but the website does not show how each file is linked together through the html. The below is the current structure of the html file. I would like to know how this needs to be changed to get the javascript to display in the canvas. (The style sheet works correctly)
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" type="text/css" href="GaugeStyling.css">
<canvas id="canvas" width="300" height="300">
<script type="text/javascript" src="gaugescripts.js"></script>
</body>
</html>
i am too a relative beginner but for a start you don't need the type in the script anymore and you put the script in the head section, which you don't seem to have.
In your gaugescripts.js, i presume you have a line such as:
var canvas=document.getElementById("canvas");
if you so that how you connect the two after the i'd need to see the script to see where your problem lies.
good luck

.js scripts not loading in Colorbox plugin

I am trying to integrate the colorbox lightbox plugin as instructed on there website
I have successfully integrated on one of my pages but i cannot get it to load correctly for the other 3 (in same directory). Onlick it goes to a new page with the full size image on a white background!
An example of this working on my site is here....
http://www.transformyourshape.co.uk/cost-of-Herbalife.php
I have put the exact same scripts, in the exact same places as in this working one on my other page here...
http://www.transformyourshape.co.uk/Herbalife-Weight-Loss.php
But it just won't load the plugin and i have no idea why.
Can anyone see where or why this has gone wrong?
I would appreciate any help, no matter how minor so i can get this resolved
Thanking you all in advance!
You have included two versions of jquery, which causes $.colorbox to become undefined after second inclusion:
<head>
..
<script type="text/javascript" src="Scripts/js/contactForm/jquery-1.8.3.min.js">
</script>
..
..
<!--Colourbox Scripts & CSS -->
<script src="Scripts/js/colourbox/jquery.colorbox.js"></script>
<link href="css/colourbox/colorbox.css" rel="stylesheet" type="text/css">
..
..
<script type="text/javascript" src="cw4/js/jquery-1.7.1.min.js"></script>
..
</head>

Lightbox doesnt load images. Stuck at loading part

First of all, i'm kinda beginnner.
I've got similar problem to this:
jquery lightbox does not load images
Lightbox working, but somehow it cannot load the image (on the server).
I need second pair of eyes on it:
head part:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>...</title>
<style type="text/css" media="all">
#import "something.css";
</style>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/lightbox-2.6.min.js" type="text/javascript"></script>
<link href="css/lightbox.css" rel="stylesheet" />
somewhere in the body:
<img class="HoverBorder" alt="something" src="images/photo2.jpg" id="rightImg" />
This works when I'm launching website from my drive. When I'm loading to my server it stucks at loading parts.
I tried to switch body part to direct links on my server, but also doesnt work.
Do You guys need something more?
I just solved this problem after like a week of googling the h*ll out of it.
My problem was identical to yours - when running on my HDD, lightbox loaded images without any problem, but when I uploaded the web to the server and tried to load the image in lightbox from there, I got stuck with the loading animation.
I tried literally every possible solution I found on the internet, but nothing worked. So I sucked it up and started working on another problem involving image loading failure (background image linked via css file) and found out, that the server I use sees a difference between *.jpg and *.JPG, which is a thing my computer does not do.
So, if your file paths are all right, try to play with your files' suffixes. That could help you.
Hope you solve this annoying bug soon.
Take care and good luck.

Very new JQuery Beginner- magnific-popup

I am extremely new to Javascript and although some is intuitive, I feel moderately lost.
Trying to create a Jquery Magnific-popup website to showcase vimeo videos since it is a free plugin.
I would like thumbnails to link to this pop-up script.
I find myself getting very confused about what files to include and which to not use since I am new to Javascript.
I have been working with this website:
http://dimsemenov.com/plugins/magnific-popup/documentation.html#mfp-build-tool
Which scripts do I use and which do I leave out to do that?
Please help! I appreciate any help
Thanks
What exactly are you unsure about including? The Magnific documentation is pretty good for that at the link you pasted.
Basically you'll get the 3 files they say, and include them in the order you see on their page. CSS, then jquery then magnific. Your paths to those files will vary depending on where you save them.
The Vimeo stuff, I've no idea.
you can look Jquery stuff, it may help you to solve all your Javascript needs. First of all, JQuery is nothing but, its Javascript package, it have many useful predefined functions, properties and more... first look the JQuery page
http://jquery.com/
if you looking popup forms, just look the link
http://jqueryui.com/dialog/#modal-form
Here you have a very simple example for a pop-up image:
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="js/jquery.magnific-popup.min.js"></script>
</head>
<body>
<a class="test-popup-link" href="img/img.jpg">Open popup</a>
</body>
<footer>
<script>
$('.test-popup-link').magnificPopup({
type: 'image'
// other options
});
</script>
</footer>
</html>

Categories

Resources