PDA

View Full Version : I need icons for Simple Controls Gallery v1.4



Travlast
02-21-2013, 05:23 PM
1) Script Title:Simple Controls Gallery v1.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm

3) Describe problem: See below.

Hi,

It says:

The code above references two external .js files plus 5 images, which you need to download below (right click/ select "Save As"):

simplegallery.js (customize variable "simpleGallery_navpanel" at the top)

I am using a mac and can not right click how can I down load them?

Thanks,

Travis

Beverleyh
02-21-2013, 05:29 PM
Mac has an alternative method. Googling "right click on mac" gives the answer.

djr33
02-21-2013, 07:47 PM
Newer macs do have right click; it's just the same button as left click, but in the right corner. That's true for trackpads and mice.

On some trackpads, a two-finger click is also a right click. I don't remember if that's set up by default though.

It's possible to configure this in System Preferences > Mouse / Trackpad.

In some cases, the right click might be disabled (although I strongly suggest enabling it; it's a bizarre aspect of macs that they sometimes don't have it enabled). If that's the case, or if you're using a very very old mac mouse without the option, you can hold the "control" key while clicking and that will work. (Note: that's the key actually called "control", not the Apple "command" key usually used for keyboard commands and comparable to the Windows 'ctrl' key.)


Of course there are also other ways to save the files such as clicking the link then File > Save, or sometimes you can drag them onto your desktop. But it'll be more helpful for you in the long run to be able to use right click :)

Travlast
02-22-2013, 12:44 PM
Hi,

Thanks for the info the ctrl click works perfectly Cheers!!!


I'm not seeing any slider in design view could you please see what I'm not getting? globalglam.co.uk/GalleryMainMenu.php I place it just under the other images just as a test as I will have it's own page liking from the images above it!

Now I think I've down everything except adding my own images but first I wanted to test as it is! Are those image's linked from wiki's site? Do I replace the links with the directly/folder that I have my images?


thanks,

Travis

Beverleyh
02-22-2013, 01:11 PM
Make sure the simplegallery.js javascript file is uploaded to the location specified in your page;
<script type="text/javascript" src="simplegallery.js">
It's currently returning a 404 error, which means it isn't located where your markup says it is (in the same folder as your web page in this case).

If you are unsure about web paths, use the absolute address while you troubleshoot (eg - http://www.globalglam.co.uk/simplegallery.js )

Travlast
02-22-2013, 02:10 PM
Where did my quick reply go? and I'd like to subscribe to this feed but don't see where?

Travlast
02-22-2013, 02:17 PM
Hi,

Sorry I am a novice and this is all new to me, so thanks now for your help!!

I'm not sure how to add the js file or how to create one?

1, Once I have copied the code from simplegallery.js how do I create the file?

2, Where does it get added ie to the body of my site or to my own js script which is part of my site or do I add it as it's own file?

Thanks,

Travis

Beverleyh
02-22-2013, 03:56 PM
There's a link to the simplegallery.js file in the demo page so you can do the CTRL+click thing to save it to your computer. That's the easy way of getting a JavaScript file. The other way is to make one yourself - again very easy, but this time just open a plain text editor (on mac I think its called TextEdit but you will need to switch it to plain text mode in its settings/preferences), copy in the JavaScript code and save it with a suitable file name and a .js extension.

Now that you have the simplegallery.js file, you need to link it to your web page - you've done that already with this line of code;
<script type="text/javascript" src="simplegallery.js">so all you need to do now is to make sure that the js file is in the location specified in the src part if that line. When you just see the file name in the src (as in the code line above), it means that the web page and the js file are sat side-by-side in the same folder. That's a relative link path - the file is in a location relative to the web page that's using it. If you were to see src="js/simplegallery.js" it means that the js file isn't sat side-by-side with the web page that's using it - its now sat one level deeper, in a folder called "js". Does that make sense?

So when you view your web page, either on your computer or once you've uploaded it online, the js file always needs to be present and in the same location, for its fancy effects to be visible in your browser. So, for your current page setup you will need to make sure that the simplegallery.js file is uploaded to the same folder as your web page - that's where the script link is saying it is.

Travlast
02-22-2013, 04:40 PM
Thats great thank you!! I think I got it!!!

Ok next....

how do I replace the photo's I have added the path bellow but it doesn't show my images what do I need to add: ["/images/GallerySlider2/galleryslider1.jpg"],

or

<li><img src="/images/GallerySlider2/galleryslider1.jpg" alt="" /></li>

in the sample the path lead to a web address but mine are local?

Thanks

Beverleyh
02-22-2013, 05:12 PM
What you've done there is created an absolute-relative path ;)
["/images/GallerySlider2/galleryslider1.jpg"],
See how there's an extra / right at the start of the image path? That's actually telling the browser to start looking for the image from the root directory (and on your computer, that's likely to be where the operating system is installed), and that will be the case regardless of where the web page is.
So lets get back to relative paths and remove that beginning slash;
["images/GallerySlider2/galleryslider1.jpg"],This is now telling the browser to look for your images, 2 levels deep - inside a folder called "GallerySlider2" that is in turn inside another folder called "images". In this case your web page would be sat alongside the "images" folder. So to get this to work, you need to make sure that there is an "images" folder sat alongside your web page, and within that there needs to be a "GallerySlider2" folder, with the "galleryslider1.jpg" pic sat inside of that.

The script image array takes the following format;
["path_to_image", "optional_link", "optional_linktarget", "optional_textdescription"]No <li> or <img> tags required.
The critical one is the first parameter - the path to your image - all the rest can be blanked out if you don't need them;
["path_to_image", "", "", ""]The demo references images on another website and that's fine too. Thats an absolute path - with the http:// part at the start

I think it will help if you read up on paths as it will really help you understand what you're doing -this should help : http://webdesign.about.com/od/beginningtutorials/a/aa040502a.htm

Travlast
02-22-2013, 08:56 PM
Hi, Thanks it getting there!! globalglam.co.uk/Gallery1Weddings.php

Two more questions:

1, where do I link the controls ie left, right, play, pause? I have down loaded them and added the to images/ButtonForSlider/ ?

2, How to make it aline to centre?

Thanks again,

Travis

Beverleyh
02-22-2013, 09:21 PM
At the top of the simplegallery.js file there is this block of code where you can define your control images;
var simpleGallery_navpanel={
loadinggif: 'ajaxload.gif', //full path or URL to loading gif image
panel: {height:'45px', opacity:0.5, paddingTop:'5px', fontStyle:'bold 11px Verdana'}, //customize nav panel container
images: [ 'left.gif', 'play.gif', 'right.gif', 'pause.gif'], //nav panel images (in that order)
imageSpacing: {offsetTop:[-4, 0, -4], spacing:10}, //top offset of left, play, and right images, PLUS spacing between the 3 images
slideduration: 500 //duration of slide up animation to reveal panel
}so this is where you'll be able to edit the paths to where your actual images are located.

And to centre the gallery you should be able to add this style to the div;
<div id="simplegallery1" style="margin:0 auto;"></div>I *think* that's all that should be needed but I can't test to make sure because I'm on iPhone now. You can move that into the CSS file but I just put it there so you can make an easier association. If that style alone doesn't work, try putting they gallery div inside another div with a style of "text-align:center;"
<div style="text-align:center;"><div id="simplegallery1" style="margin:0 auto;"></div></div>

Travlast
02-26-2013, 07:43 PM
hi thanks,

I managed to finnish it and get it all working thank- you. I have a new question but maybe I should post a new topic.

Thanks,

Travis