Big Cartel - JQuery Upload/Location - javascript

Here is a link to my site, http://johnathonpowers.bigcartel.com
Trying to play around with images on my product pages...well actually created a test page.
Unable to figure out a few things:
Where does one host a jquery file?
Do I need to have the jquery src for both jquery.min.js (many use the one hosted by google, if I am understanding any of this correctly) and jquery.elevatezoom.js?
If I end up not liking the zoom is this still an appropriate way to have a large image with small thumbnails beneath (perhaps I will explore how to click on the big image to open a full-screen version).
Should all my pictures be the same size? Right now I have square format photos and rectangle...it might end up looking horrible.
Do I put any code into CSS or just the layout and the specific page I want the images to take place?
Will these images replace the ones I upload through bigcartel's system?
There is already a jquery entry in the layout...do I just add to the end of this same section the additional src?
This is what I added to layout:
<script src="http://s000.tinyupload.com/index.php?file_id=24823496361920795072" type="text/javascript"></script>
This is my test page:
<img id="zoom_01" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg"/>
$("#img_01").elevateZoom();
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script></head>
<img id="product_zoom" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg" class="fade_in">
Thanks again for all the help and honestly probably biting off more than I can chew. I just wanted to play around with it and see if it would work/was something I liked, but seems like I have gone down a rabbit hole into a whole other world, way above my rudimentary html skillset.
Here is where I first saw the jquery stuff:
Can I integrate an Internal zoom on my products in my big cartel store?

The best place to host your javascript files is on a server that you have control over -but if you don't have any webspace, you can easily host files with a service like Dropbox or Google Drive.
The Luna theme you're using already loads jQuery in the <head> portion of your Layout, so you don't need to include that script again (and you'll get errors in your browser's javascript console if you try).
Since you're using a separate image zooming library that has a bunch of custom CSS, you'll probably want to have your CSS file hosted on a separate server as well. It's a good idea to put any files you're including in the Layout section, following the same format as the existing theme files.
It looks like the javascript file you're hosting on tinyupload.com is just bringing up a download page instead of actually loading the javascript content into the page, so you'll definitely need to change how that's loaded. Otherwise the HTML code you're using looks like it should work.

Related

Remove specific Javascript code that causes high CPU usage from Tumblr theme

recently I decided to create a Tumblr using this theme
I'm a Firefox user, and I noticed that this theme slows down the browser a lot. After some investingation and asking, the culprit seems to be the possibility to add an animated particle background that, even when disable, causes high cpu usage.
This particle function is inside a script called "s.js", that contains other part of the theme.
Is there any way to clean up the code from everything related to this particle background, and still leave the theme functional?
Thanks
OK
Option 1:
Search for all of the libraries that are being called from the js file you linked to s.js apart from ParticleJS.
Images Loaded: https://unpkg.com/imagesloaded#4.1.3/imagesloaded.pkgd.min.js
Isotope: https://unpkg.com/isotope-layout#3.0.4/dist/isotope.pkgd.min.js
Infinite Scroll: https://unpkg.com/infinite-scroll#3.0.2/dist/infinite-scroll.pkgd.min.js
Fitvid: https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js
Photoset grid: https://cdnjs.cloudflare.com/ajax/libs/photoset-grid/1.0.1/jquery.photoset-grid.min.js
Magnific Popup: https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js
Caveat, these are specific versions of each file and you could run into compatibility issues, if you need to link to a specific version.
Combine all the code from these files into a single file, then you could run it through a minifier: https://javascript-minifier.com/
For this solution to work you also need somewhere to host the file somewhere.
Option 2:
Link to all of the above files individually in your template. For example before the closing <body> tag you would need to add
<script type="text/javascript" src="https://unpkg.com/imagesloaded#4.1.3/imagesloaded.pkgd.min.js"></script>
... then add each of the other scripts. There may be a dependency order to these also, hopefully they are the same as in the header of the s.js file.
The drawback with this is instead of making a single http request to return a single js file, the template will request 6 separate js files (so this might be slower than the current system you have now).
Option 3:
If you can't host the file somewhere, you would have to actually copy the code from each js file into your template.

how to manage,speed up and preload all the images on the page?

Okay, this has been my headache for long enough. I am learning to build a dynamic news/blog website which derives image sources from MySQL database. There are different section on the website which pick images from same table on database by different tags. Most of the images I use are from external sources like google, yahoo, etc. So my questions are:
Where do you keep your images? I mean should I use images from external sources or should I save image in my website directory? Or a cloud service like one drive?
How do you preload all the images on website? Because on my site they load really slow?
How to show just empty dives until the images are loaded, like Facebook does.
If the images are on other websites (of which images I am stealing) are optimised? If so then do I still need to save and optimise it again?
A cloud service would be expensive because of the quantity of images you will have and external spurces is a big no. I will always choose to put them in my website directory
Once they put the content offline or block access, your site will be broken. – Manuel Otto
I don't know about jquery, but: preload images with jquery
Javascript, DOM. The example at the bottom is completely adjustable to how you want to show the images.
I would say: don't
This is just an example.
document.body.addEventListener("load", myFunction);
function myFunction() {
document.getElementById("allMyImages").style= "background-image: src("myImage.jpg");";
}
It triggers myFunction when the webpage has been fully loaded.
Keep your own images on your own server. Don't rely on external sources to always be up/functional. But also, be careful of using copyrighted images/graphics.
You can use javascript to hide and show your page when the document has fully loaded. If you have too many images, lazyload can be an option so that you don't put too much strain on the users connection.
Specify a width and height for the container to keep the proportions while the image loads
I'm guessing the output is optimized so the 'stolen' one should be too

Adobe Edge use javascripts generetad in other projects

I have made some animations in adobe Edge and it has generated 3 javascripts files : anim_ecran1_edge.js ; anim_ecran1_edgeActions.js ; anim_ecran1_edgePreload.js and my html file.
I want to use this animation in a different project with a specific listener.
Can someone explain me how do that ?
Regards,
So I had a problem similar to this awhile back, I wanted to call Adobe Edge projects to a webpages but did not want to store all the files in one location on my server, I finally found the solution there is not much information on the web how to do this so I will do my best to try to help you. So what I do know if you start moving Edges files around it gets cranky fast. So lets take my situation for an example I have a webpage in my root folder for my website and I have an Edge folder that I store all my Edge files in. In order for me to call on an animation on the web page in the root folder I need to change a few things in the edgePreload.js file, there are four things you need to change, these are what mine look like:
Edge/Icons/edge_includes/jquery-1.7.1.min.js
Edge/Icons/edge_includes/edge.2.0.1.min.js
Edge/Icons/icons_edge.js
Edge/Icons/icons_edgeActions.js
*Note I would use ctrl f to find these files because this .js file is not neatly written.
You see I had to add "Edge/Icons/ so that way the .js file knows where to look. Also if you are going to have images you will need to change the edge.js file, my file looks like this "var im='Edge/Icons/images/';"
(ristenk1 I think this last step maybe what you are lacking, or you just didnt mention it, instead of using an iFrame try just using a div)
Last but not least the web page that you want these animations to show up on you need to add something that looks like this to your < head> tag. This can be in the .html file in your published edge project, every project you publish has a unique id.
!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="Edge/Icons/icons_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-42407812 { visibility:hidden; }
</style>
Then in the body where you would like this to show up use:
<div id="Stage" class="EDGE-42407812">
</div>
Also here are a few resources I have found on this:
http://www.danielhanly.com/blog/tutorial/adobe-edge-embedding-animations-page/
http://www.vbulletin.org/forum/showthread.php?t=277838
I think I have a couple more on my work computer I will try to post them tomorrow while at work. I hope this helps if you have any questions let me know.

Downloaded aspx website does not display well

I have downloaded a aspx webpage and saved it as html. I open it in IE and chrome and it takes time to load + some parts are missing. All the text is there but the onmouseover is not working properly and some css is not displaying correctly. Was the content not downloaded completely? i.e is it missing sme javascript, css or else?
I have done what you describe on many occasions for the purposes of putting together a prototype of new functionality in an existing application.
You will likely need to do a couple of things:
Ensure the paths to your JS and CSS resources are right (removing the unneccessary JS files, if any)
Also, you will likely need to update the paths in your CSS to any image resources in your page

Editing Source Code in Wordpress

The company I am working with hosts their webpage on Wordpress. They want me to edit some of the code in order to do various things, such as enable a photo container to be a moving slideshow.
Figuring out the javascript and html to achieve the results they desire is not problematic for me. However, I am unsure how to get full access to the Source Code of the site. I have privileged access to the backend of the site but in wordpress when you go to edit it only shows some of the basic html tags while hiding the <div> and <script> tags and code. Is there any way edit the page in its source code format? I don't want to have to go through the simplified and less expressive/less control Wordpress interface, and I don't even know if I can achieve the desired results with it.
If you try and edit individual pages you're approaching the problem in the wrong way. You probably want to be using a plugin or modifying a plug-in to create the slideshow you need. There are many plugins for wordpress that do what you seem to need.
slider-widget is one such pluging
In Wordpress, there are two main parts to the website's front and backend: the core WP files and the theme that is used. (And other important aspect to a WP site is the database, where all content is stored, including text/images entered in the admin backend.)
Core WP files are not to be changed because they get overwritten with each update. What you want to work with is the theme. Look in Appearance>>Themes and see what the active theme is for the site. It will also tell you the name of the folder the theme files are in.
With FTP, go to root/wp-content/themes/your-theme-name. That's the php, html and css source of the displayed part of the site. Uploaded images are in /uploads/, and plugins in /plugins/.
See http://codex.wordpress.org/Theme_Development to get an idea of how themes are built and how to modify them.
See the rest of the docs at WP to see how to work with plugins, add other javascript correctly so it doesn't conflict with WP's included javascripts, etc. All the docs you really need are at wordpress.org

Categories