phazer11 Posted December 9, 2014 Share Posted December 9, 2014 Hey I find myself in need of a JQuery 'widget' capable of doing a gallery. i.e. clicking on an image causes the next image in the series to show up and clicking on that one brings the next one up and so on. Is there a way to do that? I know you can do rollovers with JQuery but not if I can do what I just described. Normally I'd just figure it out myself but I'm pressed for time. I need to have this done by 5pm EST on Wednesday. I might not need this fancy of a JQuery widget but I'm making a website for a Restaurant and I need to do something special to make up for not being able to make an animation -- due to not having the material for one -- (one of the requirements for the project I'm doing for my class). It might wind up not being a big deal because I earned extra points for my special menus and by having the cleanest, slimmest well functioning code. Link to comment Share on other sites More sharing options...
TechAngel85 Posted December 9, 2014 Share Posted December 9, 2014 A quick Google search will get you what you need. These were in the first 5 results: https://www.jssor.com/ https://www.vandelaydesign.com/jquery-image-galleries/ https://www.hongkiat.com/blog/jquery-image-galleries-sliders-best-of/ Link to comment Share on other sites More sharing options...
phazer11 Posted December 9, 2014 Author Share Posted December 9, 2014 I must be tired and not looking properly then. I'll look through some of them. Still I can't help but wonder if there are any more light-weight solutions. I hate Javascript. Link to comment Share on other sites More sharing options...
phazer11 Posted December 9, 2014 Author Share Posted December 9, 2014 Any ideas where this is supposed to go? It's from the slideme plugin. $(document).ready(function() { $('#main').slideme(); }); I've tried in multiple places. Here's the start of my HTML, which is where I'm assuming it goes. In addition to where it is now, I've tried placing it after the css sheets and other combinations. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Mediterranean Grille</title> <link href="stylesheet.css" rel="stylesheet" type="text/css"> <link href="nav_bar.css" rel="stylesheet" type="text/css"> <script src="jQueryAssets/jquery-1.8.3.min.js"></script> <script src="jQueryAssets/jquery.slideme-1.19.69.js"></script> <link rel="stylesheet" href="jQueryAssets/slideme.css" type="text/css" media="all"/> </head> <body> <script type="text/javascript"> $(document).ready(function() { $('#main').slideme(); }); </script> Link to comment Share on other sites More sharing options...
TechAngel85 Posted December 9, 2014 Share Posted December 9, 2014 According to documentation, right under the link reference element within the head: script src="https://code.jquery.com/jquery-latest.min.js">script>script src="js/jquery.slideme-1.19.69.js">script>"stylesheet" href="css/slideme.css" type="text/css" media="all"/>$(document).ready(function() { $('#foo').slideme();}); Link to comment Share on other sites More sharing options...
phazer11 Posted December 9, 2014 Author Share Posted December 9, 2014 Yes I tried that too. First thing I tried in fact, was looking at the documentation. I've even tried it without the <script type="text/javascript"> </script> Link to comment Share on other sites More sharing options...
TechAngel85 Posted December 9, 2014 Share Posted December 9, 2014 No idea. I don't have any way of testing and troubleshooting. I'd just say, double check to make sure you're calling it correctly in both the script and the HTML. Haven't had a web server in quite a while and in the end of my website designing days I shifted towards Wordpress.So you've tried this? <!doctype html> <html> <head> <meta charset="utf-8"> <title>Mediterranean Grille</title> <link href="stylesheet.css" rel="stylesheet" type="text/css"> <link href="nav_bar.css" rel="stylesheet" type="text/css"> <script src="jQueryAssets/jquery-1.8.3.min.js"></script> <script src="jQueryAssets/jquery.slideme-1.19.69.js"></script> <link rel="stylesheet" href="jQueryAssets/slideme.css" type="text/css" media="all"/> $(document).ready(function() { $('#main').slideme(); }); </head> <body> Link to comment Share on other sites More sharing options...
phazer11 Posted December 9, 2014 Author Share Posted December 9, 2014 Yeah. Link to comment Share on other sites More sharing options...
TechAngel85 Posted December 9, 2014 Share Posted December 9, 2014 And you're calling in your HTML like so: <div id="main"> <ul class="slideme"> <li><img src="img/one.jpg" alt="One"/></li> <li><img src="img/two.jpg" alt="Two"/></li> <li><img src="img/three.jpg" alt="Three"/></li> <li><img src="img/four.jpg" alt="Four"/></li> </ul> </div> Link to comment Share on other sites More sharing options...
phazer11 Posted December 9, 2014 Author Share Posted December 9, 2014 Yep. <div id="main"><!--Main starts here--> <ul class="slideme"> <!-- Class "slideme" is mandatatory! --> <li><img src="images/buffet_1.JPG" alt="One"/></li> <li><img src="images/buffet_2.JPG" alt="Two"/></li> <li><img src="images/buffet_3.JPG" alt="Three"/></li> <li><img src="images/buffet_4.JPG" alt="Four"/></li> <li><img src="images/buffet_5.JPG" alt="Five"/></li> <li><img src="images/buffet_6.JPG" alt="Six"/></li> <li><img src="images/buffet_7.JPG" alt="Seven"/></li> <li><img src="images/buffet_8.JPG" alt="Eight"/></li> </ul> </div><!--Main ends here--> Link to comment Share on other sites More sharing options...
TechAngel85 Posted December 9, 2014 Share Posted December 9, 2014 No idea. Without a server to test on, that's about all the help I can think of to provide. The last thing I can think of is to ensure the server has the required features to run it. That's usually more of a PHP script issue (making sure the server's PHP is up-to-date), but you never know. If you can't get it perhaps attempt a different jQuery slider to see if it works or fails. If several of them fail, it's almost guaranteed a server issue and something needs to be installed, updated or allowed to run on the server. Link to comment Share on other sites More sharing options...
phazer11 Posted December 9, 2014 Author Share Posted December 9, 2014 Bump. Anyone else have any ideas? Link to comment Share on other sites More sharing options...
z929669 Posted December 9, 2014 Share Posted December 9, 2014 I think tech is right ... you need to tell PHP let JS run on the site (assuming you ex is javascript and not java proper). it seems like a config issue. s4n would know ... PM him Link to comment Share on other sites More sharing options...
phazer11 Posted December 10, 2014 Author Share Posted December 10, 2014 It's a problem with that particular plugin it seems. I tried another and it works fine after some tweaking. The Only issue I have right now is not being able to center the images in the div. Link to comment Share on other sites More sharing options...
TechAngel85 Posted December 10, 2014 Share Posted December 10, 2014 You need a parent div as a container and make it the width of the page and center the child div within it. Even better, use CSS to give the fix a fixed width to the div and center it on the page using margins. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now