logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 07-05-2012, 07:40 PM   #1
BluiSh
 
Join Date: Apr 2009
Posts: 36
Cool buttons in slideshow problem

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
BluiSh is offline   Reply With Quote
Old 07-05-2012, 09:09 PM   #2
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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.
HTML Code:
$('#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.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 07-05-2012, 11:31 PM   #3
BluiSh
 
Join Date: Apr 2009
Posts: 36
Default

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 is offline   Reply With Quote
Old 07-05-2012, 11:31 PM   #4
BluiSh
 
Join Date: Apr 2009
Posts: 36
Default

Iīm kind of new in javascript
BluiSh is offline   Reply With Quote
Old 07-05-2012, 11:58 PM   #5
BluiSh
 
Join Date: Apr 2009
Posts: 36
Default

or which is the proper way to add it in the HTML? do you mean inside the bodytag???
BluiSh is offline   Reply With Quote
Old 07-06-2012, 12:35 AM   #6
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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?
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 07-06-2012, 12:43 AM   #7
BluiSh
 
Join Date: Apr 2009
Posts: 36
Default

of course gentleone, this is the link:

http://www.webchief.co.uk/blog/simpl...dex.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
BluiSh is offline   Reply With Quote
Old 07-06-2012, 12:58 AM   #8
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 07-07-2012, 04:39 PM   #9
BluiSh
 
Join Date: Apr 2009
Posts: 36
Default

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
BluiSh is offline   Reply With Quote
Old 07-07-2012, 09:02 PM   #10
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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:
Code:
#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.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 12:19 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com