I have a code generated by "highslide" software and what it does is to create an image gallery.
This code consists of .css html and javascript.
If I place the htmal code in the Joomla's "index.php" file and then the rest of the file in the root directory then the image gallery is working and is placed in every page in Joomla.
I do not want this. Is there a way of assigning that image gallery to only pages I choose?
Or is there a way to find out what is the index.php main file for that specific page I need to have the gallery and paste the code in there?
I have tried to insert the code in a custom module via the Joomla's editor but when I click on save then it compiles the code and remove certain parts of it and cannot work.
It removes the link to javascript and to css file.
Is there a way without any other third party extension to have that code into the custom module without then Joomla eliminate the half of the code?
Thank you,
Best Regards,
Andreas Achilleos
I would not add things like this to your index.php file. This is Joomla, not a static html website ;)
You have 3 options:
Option 1 would be to develop your own module and install it on your Joomla site. This option would take the longest amount of time and would require you to get your handy in a bit of coding.
Option 2 would be to firstly download, install and enable a plugin called Sourcerer. Once done, in the Joomla backend, create a new "Custom Module" and manually add your html code. After, below the big textbox, you will see a button below saying "Insert code". O modal will popup allowing you to add your custom code. Simply add your CSS and JS using the <style> and <script> tags.
Option 3 would be to use a pre-built Image Gallery extensions from the Joomla Extensions Directory. There are loads to choose from.
Hope this helps
Related
I created a cookie banner with some HTML, CSS and Javascript.
My question is how can I add these files within Wordpress to make the banner works on the whole site?
I know I could just use a Wordpress plugin to generate a cookie banner, but I was wondering if it was possible to integrate my code.
Thanks
These are the following methods:
You may use the plugin "Header and Footer" (This plugin have different TABS like html, CSS, JavaScript) and add your whole in this plugin. So Your code work in whole WordPress website.
First, you need to install and activate the SyntaxHighlighter Evolved plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you can go ahead and edit the blog post where you want to display the code.
I'm attempting to use CKeditor on a website, and I need to be able to click to go to links within the editor itself. As this is not possible with the stock editor, I attempted to install the plugin at the following link: https://github.com/mlewand/ckeditor-plugin-openlink
Having downloaded the plugin and tried to install it, when I activate the plugin in config.js the editor on the site page now has the attribute style="visibility:hidden", and when I manually change this to visible via the browser debugger, it shows a default texture rather than the CKeditor editor. It's possible my method of installation of the plugin is to blame, as I'm finding no other instances of people having this issue. The download of the plugin contains a folder "icons" and a folder "lang", as well as plugin.js (the plugin file itself) and a readme.
To install, I simply pasted the relevant contents of the lang files into their respective counterparts in the main CKeditor fileset, and for the time being I ignored the icons folder, as it simply contains the image file for the tool icon; I also commented out the code which calls for this image so as not to have conflict. I then moved plugin.js into the plugins folder within the CKeditor fileset, within its own subfolder plugin as with the stock plugins already present. I then added the lines in the config called for by the readme. I finally added to the config
config.extraPlugins = 'plugin'; to enable the plugin. Once I updated all files on the server, it became clear that activating the plugin caused the editor to disappear as I mentioned. If anyone knows why this might be or what I may have done to interfere with the files incorrectly, I'd greatly appreciate it. Currently I'm unsure as to what I could have done better during installation. I can elaborate further if I've been at all unclear. Thank you.
I'll add that here(plugin activation in ckeditor) appears to be a similar issue, although the answer given and the specific issue don't quite seem to apply. If they do, feel free to mark this as a duplicate and I apologize for the redundancy.
EDIT: It appears that the reference added in config.js and the plugin folder name needed to correspond to the name in plugin.js, as I've now discovered.
Important to note that plugin name in plugin.js, name of plugin folder, and reference in config.js must all correspond.
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.
I am a very new user of Drupal and want to add this menu to my website. It has the HTML code with a CSS file, two .js files and a few images.
I want to embed this code in a block into my Responsinve blog themed Drupal7 site
I don't even know where to start or end.I tried drupal_add_js but I think I missed something somewhere and reading the forums has got me all the more confused.
In short I need to understand every small point of how and where to make changes to my site folders.
Any help would be highly appreciated.
You dont need to add your js & css in the template file.
When you go into sites/all/themes/your_theme_name
Look for a file that ends with .info
Best practice is to add all of your custom .js & css files there.
All HTML changes will be done in the .tpl template files.
Hope this helps.
The easiest way to do add js is:
Locate your theme folder, usually /themes/your_theme_name or /sites/all/themes/your_theme_name
Look for template.php in it
Look for your_theme_preprocess_html() function - 'your_theme' might be, 'bartik' or 'garland' or your theme name, if not - change it (usually, it's the name of the folder)
add `drupal_add_js('path_to_js') to function
That's it, clear your cache in Admin > Config > Perfomance and check your code
oh, and to add menu block,
Structure > Menu and create new menu or use existant, add menu items
go to Structure > Blocks, find your menu in list and select region for it
p.s.
and, yep, it's not the only way to add js, here you can find at least 7 ways to do it
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