How to implement Jquery using JS Injector in Drupal 6. Created for Brigham Young University-Hawaii Drupal users by Jinendra Jinadasa. Drupal for Education
Host Unlimited Websites For .88 ! bit.ly Unlimited Hosting, Free Domain, MySQL, PHP, CGI, SSL, FTP, Stats, 0 google adwords, E-Commerce Included, Dreamweaver Ready, 30 Day money back guarantee This is part 3 here is the link to part 2: www.youtube.com In this tutorial by James at www.dreamweavertutorial.co.uk we will be installing a custom image gallery with a layered alpha transparent polorioid effect background image. We will create the free image gallery with minimal html and css and then attach the image gallery to the jquery lightbox plugin which will animate a larger image into the center stage of your website. Your website visitors can then click through the images as if they were a slideshow gallery or peruse the images individually. The image gallery is available for a free download, here is the link to the Dreamweaver Tutorial exercise files bit.ly This is a great tutorial for learning how to postion elements and for using image gallery scripts. Follow me on Twitter: www.twitter.com My RSS feed for Dreamweaver Tutorial updates: www.dreamweavertutorial.co.uk
Video Rating: 4 / 5
I’m getting an error
$(“#accordion”).accordion is not a function
@prabhatjn Hi! Thanks for your feedback, I have added “Drupal 6″ in the Description of the video. Hope to develop one for Drupal 7 soon.
hi,
Please also mention that this video is for drupal 6, it is outdated for drupal 7 as jquery ui now comes with the drupal core and so all this can be done in a much simpler way. e.g. read chris herberte blog
great video. Many thanks. please create a similar video showing dropmenu
@cathy123454 Hi! The tutorial is in HD so, please try changing the video display setttings to 1080p. You should see the text clearly. Thanks.
Thank you for this great tutorial. I found it impossible to read the codes and words you entered in jquery ui loader, js injector and jquery ui loader. Could someone tell me what to enter, please?
@claynard i get the same error…
I am not getting js to work on my page as well.. i can’t even determine why its not working, n its confusing the hell out of me :/
@BYUHawaii
Does having clean url’s affect the css and js injector? For example, can I use /accordian-test as the url for the page that the accordian is supposed to show, or does it have to be the numeric value?
@BYUHawaii
Hi BYU,
Thanks for the response. I am currently using:
Drupal 6.21
CSS Injector 6.x-1.4
jQuery Update 6.x-1
jQuery UI 6.x-1.4
js Injector 6.x-1.0
I’m not sure if you needed to know about the jquery update but I included it anyway. My site is in maintenence mode because it is no where near ready. If you let me know I can open it up for you to take a look at, I really appreciate the help.
Thanks
@claynard Hi! what version of Drupal 6 are you using? What function caused the error in your code? Can I take a look at your URL? Thanks.
Well I guess I did not have Jquery UI installed properly, now I finally do, but still the accordian does not work
Well I guess I did not have Jquery UI installed properly, now I finally do, but still the accordian does not work…
I could really use some help getting this working. I keep getting this error message: modules/jquery_ui_loader/jquery_ui_loader.module on line 85. When I remove that function from my code the fatal error is gone but then the accordian doesnt seem to work as a result. Any ideas on whats happening?
@Carlitta87 Hi! You are welcome to email me at [email protected] so I can help you trouble shoot your site. Thanks.
@BYUHawaii im trying to send u a message but i cant b/c im not a friend…i cant send my url over this…
@Carlitta87 Sorry here is what was typed at 6:25
$(document).ready(function(){
@Carlitta87 Hi! What is your URL?
Im trying to do this with a timeline effect…doesnt seem to be working….
@BYUHawaii Thx Mate, fixed everything, had problems with my html editor, which changed DIV IDs…
thx for help, Happy new year.
@Denxxx21 Hi! Nice website. I like the clean look and feel. Like your logo. Nice work. Where are you trying to implement the Jquery integration? the Home page?
@BYUHawaii Mate, can you plz look at my website bikerentalsnyc()com, maybe you can see smthng with firebug… i spent 3 days trying to make Drupal and jQuery UI working together…. thx from snowy NYC to sunny Hawaii
@BYUHawaii
Did you put the Jquery Theme on the CSS injector?
i put smoothness/jquery-ui-1.7.3.custom.css on [jQuery Loader] and Sample accordion markup with jQuery UI CSS Framework classes on [CSS injector] i have to add some more CSS?
still can’t make it work… seems i missing smng, saw you have jQuery Media and jQuery UI Dialog, maybe i need them to make it works?I THINK that either Jquery UI CSS is not loaded properly, or $(document).ready(function() is not working…
Hi! Using Jquery 1.6. Did you put the Jquery Theme on the CSS injector? You also need to be connected to the internet for Jquery to get the library. Hope this helps.
@BYUHawaii
Mate it’s on my LOCALhost….
can you tell me:
1) what jQuery vesrsion and jQuery UI vesrion are you using?
2)THIS theme1.7.2.custom.css(which you using in jQuery LOADER) you get from jquryUI()com ?
cause in my case the problem might be that : The jQuery UI dupal module doesn’t add the jQuery CSS’s
If you wanted to use escape key to close the large image, how would you approach that ?
Thanks in advance
@MultiNickky look at the code generated on screen and copy it. its just a path to the images its html already, its not dreamweaver code. Just like if i asked you to find your start up icon for your favourite game like COD4, how would you find the start up icon in your computer? maybe, c drive/users/programfiles/activision/cod4. well its the same with the images.
Great video but you know when you link the big image with the tumbnail ones right how do you do it in php or html if you are not using DW
Really neat video thanks a lot! But every thing works smoothly until previewing and opening the lightbox for the first time! i think it is down to the folders i downloaded being inside my own website folders as i was hoping i could use this as a page on a website i am making! if this is right could you try and explain how i can fix this problem in a simple way?! thanks alot
@mslisamurai they mate and have a litter of little lightbox galleries but other than that, probably not much else happens.
what if you have more than one gallery on the same page?
@epics7 hi you can go into the lightbox JS file inside of dreamweaver and click inside of the open file and go to EDIT>FIND AND REPLACE. then type in ‘opacity’ you can adjust the opacity which is currently set to 0.8 and just to the left of that you can set a background color. – James
Good video. Is there a way to display the images without making the background go dark? Example, I have a design made in Fireworks that I want to use. The layout is a white box on a black background. There is a white line towards the bottom that separates the thumbs from the main pictures that will display in the large space. Is this possible using Jquery with the images showing up in the space? Like I can do in Flash.
AMAZING VIDEO
U GOT ONE MORE SUBSCRIBER
THX MAN
Thanks alot mate for this USEFUL video, really helped me
but i have one question , if i have a large image , how can i make it fit to screen when i click the pic ? i mean i dont want the large image to go farther than the browsers window, hope u get it, and thanks again
thnks i will appreciate i am designing the real website in the backround so please that is not the original i am playing around as i have no experience in web site creation i have been studying html online and with different tutorials i am now onto php and mysql. so it will be a while before the real site is up and running. thanks for the comments appreciated .
@lenegand Hey, yeah i had a look at your floating menu. looks pretty cool.
yes you can get them to auto revolve but you will have to set an interval and will need to know a bit of javascript to do that. If i get a chance ill write some code but it wont be for a few weeks. website looks good glad you got the floating menu to work ok and good to see you made some icons for it too.
James
thamks a lot great tutorials i set up the floating nav bar on my web page i haven’t finishe all the pages yet but you can check it out.. on my web design page in the small thumbnails i have set up a j query light-box/.i am busy doing the light box gallery. is it possible to do the gallery so it plays automatic when you click on a thumbnail. thanks and keep up the tutorials.