PDA

View Full Version : buttons in slideshow problem


BluiSh
07-05-2012, 07:40 PM
Hello

I followed a tutorial that involves a slideshow of photos in my website and my problems is that I canīt get how to appear the buttons of my slideshow, and also I don't know if they work at all.

this is my website where the slideshow is:

http://www.spellphotolab.com/galeria.html

in fact the slideshow is moving but the buttons are not there, anyone could help me? I would be very appreciated.

Thanks

gentleone
07-05-2012, 09:09 PM
Looking at the javascript on your page the buttons get's injected into the DOM before (prepend) and after (append) an element with the id of slideshow.

$('#slideshow')
prepend('<span class="nav" id="leftNav">Move Left</span>')
append('<span class="nav" id="rightNav">Move Right</span>');

That element (#slideshow) is not in your HTML, so that's why you don't see the buttons.

BluiSh
07-05-2012, 11:31 PM
Ok gentleone

first than anything, what is the DOM? is a file or is jquery.js external file? or where do I have to put them??? or what element am I missing???

Thanks for your support is very appreciated.

BluiSh
07-05-2012, 11:31 PM
Iīm kind of new in javascript :)

BluiSh
07-05-2012, 11:58 PM
or which is the proper way to add it in the HTML? do you mean inside the bodytag???

gentleone
07-06-2012, 12:35 AM
The DOM (Document Object Model) s an API for HTML and XML documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation by using a scripting language such as JavaScript.
Source: developer.mozilla.org

Thus in your case the jQuery (a JavaScript library) script is manipulating the DOM to add those 'prev' and 'next' buttons to your HTML... to an element with id slideshow. With a normal 'view source' you wont's see them, but if you use 'inspect element' then you will.

But... since there is no element with an ID slideshow in your HTML (and DOM), the script can't add those buttons to that element.

So either we have to wrap your gallery in a div with an ID of slideshow or we have to do something else.

Where did you get this script from? Do you have a link to that page for me so that I can have a look how it's done on there?

BluiSh
07-06-2012, 12:43 AM
of course gentleone, this is the link:

http://www.webchief.co.uk/blog/simple-jquery-slideshow/index.php?page=3

and also I have to tell you that I pull it off!!! :) I just add the id slideshow in the html body area and thatīs it

I went and look directly to the tutorial and charge the code page to try and see what's going on in the HTML area like you said and found it,

Thanks you very much for your info and explanation

sincerely
BluiSh

gentleone
07-06-2012, 12:58 AM
Great! I'm glad that my explanation was enough for you to figure it out yourself. And now you know without the DOM there would be no JavaScript magic. Well... at least a lot more less then with it. :)

BluiSh
07-07-2012, 04:39 PM
Gentleone

I have another issue here on the same slideshow, finally like I said the buttons are there and work, but the problem is that they have an absolute position in the ".nav" rule, so I changed it to relative but even with that they are not in the same position from the top to the value of 300 pixels? dou you think you know what is going on?

Another issue here is that the photos are kind of heavy and the download time for each of them are not fast enough? do you think is valid is if compress them a little bit more because I don't want to make them smaller in size only in weight.

Thanks for your attention
Sincerely
BluiSh

gentleone
07-07-2012, 09:02 PM
Okay... I see what's going on. Leave the .nav absolute positened, but you will have to make a new CSS rule for #slideshow and change the 'left' values from the buttons.

Something like this:

#slideshow {
position: relative
}

#leftNav {
top:335px;
left:20px; /* changed from 400px to 20px */
width:46px;
height:53px;
background-image:url(previous30.png);
background-repeat:no-repeat;
z-index:999;
}
#rightNav {
top:335px;
left:670px; /* changed from 1065px to 670px */
width:46px;
height:53px;
background-image:url(forward30.png);
background-repeat:no-repeat;
z-index:999;
}


This will align the buttons properly.

Regarding the photos. Always try to compress them as much as you can withou loosing too much quality.

BluiSh
07-08-2012, 06:18 PM
Thank you very much, Iīm going to try the code and let you know the results,

Feel very good for people like you sharing knowledge , thanks again, very appreciated :)

Sincerely
BluiSh