Javascript Image Slider / Posts /

How to make the image slider work with Joomla

49
Sorry I am really new to this. I don't understand where I need to copy the code in the page. I copied the CSS code into my page but I only see the code, not the slider
Caroline  12 years ago   viewed: 15910    

4 Answers

1

I'm having the same problem. For start I'm using Joomla 1.5 and most everything has a index.php file instead of a index.html and some folders on my server for the site do have an index.html but don't work with the code and css changes.. Also, it seems that the process of getting it to work should begin with getting it to work locally on your pc as I'm doing at the moment.

First make a folder on your desktop and name it "Test Website" wich will become a "root directory". So explaining further, "Test Website" is a root directory.. and whats inside are other directories or additional files.

Second, create a notepad file inside that folder and name it "index.html" and save it as "index.html" with the "all file types" in the save options selected. This makes it an actual .html document type for browsers to read without just displaying the text.

Third, right click the file and select edit, and copy and past the code insde the " " below into it and save it again.(-don't copy the " ")

"

<html>
  <head>
    <link href="js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="js-image-slider.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="slider">
        <img src="images/image-slider-1.jpg" alt="Caption for slide 1" />
        <img src="../images/image-slider-2.jpg" />
        <a href="http://www.menucool.com"><img src="images/image-slider-3.jpg" /></a>
        <img src="images/image-slider-4.jpg" />
        <img src="images/image-slider-5.jpg" alt="Caption for slide 5" />
    </div>
  </body>
</html>

"

Fourth, take the files you downloaded from the menucool site and copy and past the "images" folder into your "Test Website" folder

Fifth, also inside the files you downloaded from the menucool site, should be a "themes" folder. Open it and open the "5" folder  and copy and past the three files inside into your "Test Website" folder. Then move the loader.gif that you pasted into the images folder(yes the one in the "Test Website" folder).

Lastly, you need to make some mods to the .css file to make it all work, but the base for everything is nearly complete.

So open the js-image-slider.css file in the "Test Website" folder(the one with the cog wheel on it) by right clicking on it and selecting edit.

Find the code below this paragraph once your inside the "js-image-slider.css" file, (which will be eddited in line 18 in the document) and change whats in the  ( )  to this   (images/loading.gif)   and save the document. The reason for changing it is because we moved the "loading.gif into the "images" folder and I wanted to teach you some css. So, we needed to edit the js-image-slider.css file so the webbrowser will look inside the images folder since the "loading.gif" isn't out in the open with the rest of the files/folders inside the "Test Website" folder anymore... its in the "images" directory. By doing this you should begin to understand how important it is to edit .css files and how to make it direct to the proper locations so things will work when you try this on your website with a more complicated arrangment of file locations.

Here is the code I mentioned, just edit what I explained above.

#slider {
    width:700px;height:306px;/* Make it the same size as your images */
 background:black url(loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*make the image slider center-aligned */

Lastly save the "js-image-slider.css" file and your done with everything. All you have to do to see that you have done everything correctly is to open your "Test Website" folder and right click on "index.html" and select "open" with explorer and you should see this happen <click the link to the right>

I hope this was helpful. Once you get this down then you can try and tackle how to add this to your site. I havn't figured it out yet because I have many root directories and php files, css files, and template css files... and even finding the right files to edit could end up not working if you have improprer .css code due to typo's ect.

 

RiV   12 years ago
1

OK. So I finally got it to work on my site's main page instead of just local. So if your reading this and your using Joomla 1.5 then you need to find the right folders to edit on your server. So for example: if you installed joomla 1.5 on your server as a root then go to

templates/"the template youre using on your site inserted between these quotes but without using them"/index.php

eg: templates/wowsmfloader/index.php

If you have your joomla site installed as a subdirectory to a parent website your running on your server then it may look like this:

public_html/templates/"the template youre using on your site inserted between these quotes but without using them"/index.php

Anyway now for the main info the readers probably want. *BACKUP YOUR FILES BEFORE EDDITING*

Right click on the "index.php" file and below you should see something very similar to this as you read the document further down:

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $this->params->get('colorVariation'); ?>.css" type="text/css" />

(because of the space allowed in this forum the code shifted to the next line to make room for the text)

Right below the code which I made "BOLD" above, your going to eventually read further down to see the closing tag </head> . Copy and past the code below into the document right above that </head> tag: (don't get confused.. so long as it's placed anywhere between the opening tag "<head>" and closing "</head>" tag on it's own lines:

<link href="js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="js-image-slider.js" type="text/javascript"></script>

Keep the "index.php" document open since we have more to do!  Now, what we've done is enable the image slider to work, but without adding a <div id="slider">  and code along with some more files your not going to see anything different on your site.

So again, find a tag like "<div id="top_menu">. You may also see somthing like <div id="main_bg" class="banner1">. Basicly you need to double space underneath one of these <div id=... tags  where it closes which is "</div> " and copy and paste this code:

<div id="slider">
        <img src="images/image-slider-1.jpg" alt="Caption for slide 1" />
        <img src="images/image-slider-2.jpg" />
        <a href="http://www.menucool.com"><img src="images/image-slider-3.jpg" /></a>
        <img src="images/image-slider-4.jpg" />
        <img src="images/image-slider-5.jpg" alt="Caption for slide 5" />
</div> 

OK, almost done. We've now coded the "index.php" with the proper code to get a basic slider to work, so you can now save the document you have open.(the "index.php" encase you were sleeping) p.s-> depending on where you pasted that code it will change where the slider apears. I leave it open to the reader to test, but I suggest finding a place right below the "<div id="top_menu">

All thats left is to move the files you downloaded from menucool into the directory where the "index.php" we've worked on is located. Those files will be the "js-image-loader.css" and "js-image-loader.js" files from the "theme" folder of your choice. I would use the files from theme "5" to make sure you can get a basic one to work.

Copy and paste the "loading.gif"(from the files you downloaded from menucool) file into the "images" folder which should be in the same directory folder as the "index.php" we edited. Do the same copy and paste procedure for all the images from inside the "images" folder (yes the one you downloaded from menucool) into the "images" folder in the same directory as where the "index.php" resides like we did before.

Now edit the "js-image-slider.css" file that you pasted into the same directory as the "index.php", and where it says (loading.gif) in the code below change it to this (images/loading.gif)

#slider {
    width:700px;height:306px;/* Make it the same size as your images */
 background:black url(loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*make the image slider center-aligned */
}

 

Remember to add the pruchased code to the "js-image-slider.js" file or none of this will work on a live website!

YOUR DONE!.. I hope this was helpful for newer web developers... Remember if you don't follow this to the letter then you will most likly see a loader with no images or no loader at all.. or at worst a totally screwed up website. Like I said in the begining to back up your files before you edit them. Read more about how to tweak the files from these forums as well as the code snippets on the main page of menucool.com for the image slider. You will have to edit the same files that I listed in this thread/post to customize the loader as well as enable thumbnails;the video capability, as well as simply adding more or less images to have cycle. Keep in mind, that if your wanting to use a theme for the slider other that the "5" theme that I chose you will have to do similar edditing but it may be different. I just want to make sure readers understand the basics for installing it in joomla 1.5 and similar powerd websites.

 

RiV   12 years ago
1
Thanks for your kind help.
milo   12 years ago
0
RiV, you are great! Thanks for your help!
milo   12 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: