Search jQuery

jQuery Forum

Screen name:
jacobadoy
About Me:
I'm a front-end developer who specializes in HTML/CSS and Wordpress.
Email ID: contact@josephmanning.com

jacobadoy's Profile

2 Posts

3 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Show on click
[2Replies]
- 13-Apr-2013 12:47 AM
- Forum: Using jQuery
I wrote a script that when a thumbnail is clicked that it will display an image in a separate div. It works but the problem is it switches the new image, fades and then reloads the new image. I want the old image to fade and the new one to fade in.

jquery
2. $('#portfolioLeft a.thumb').click(function() {
3. var thumbId = $(this).attr('id');
5. $('#portfolioRight #portfolioMac img').fadeOut('slow');
6. $('#portfolioRight #portfolioMac img').attr('src', 'img/port/lrg/' +thumbId+ '.jpg').fadeIn('slow');
7. });
html
2. <div id="portfolioLeft">
3. <a class="thumb" href="javascript:void(0)" id="josephmanning"><img src="img/port/sml/josephmanning.jpg" border="0" alt="" /></a>
4. <a class="thumb" href="javascript:void(0)" id="omm"><img src="img/port/sml/omm.jpg" border="0" alt="" /></a>
5. <a class="thumb" href="javascript:void(0)" id="omm-dancer"><img src="img/port/sml/omm.jpg" border="0" alt="" /></a>
6. </div>
7. <div id="portfolioRight">
8. <div id="portfolioMac">
9. <div id="portfolioPadding">
10. <img src="img/port/lrg/josephmanning.jpg" border="0" alt="" />
11. </div>
12. </div>
13. </div>
Any help is appreciated.

Creating a simple jQuery image slider
[1Reply]
- 10-Apr-2013 07:03 PM
- Forum: Using jQuery
I am in the process of creating a simple image slider. The script works however it loads the second to last and last image/text at the same time on top of each other. It then takes about 7 seconds before it seems to oad the code and work. http://project.josephmanning.com/jm Is the temp site while I develop the site.

HTML
2. <div id="homeSlider">
3. <div id="sliderWhole">
4. <div id="slideShow">
5. <div class="slideContainer show"><div class="textHover"><span><h5>O'Riada-McCarty-Manning Academy of Irish Dance</h5>Built with Wordpress, HTML/CSS, jQuery, Illustrator and Photoshop<br /><br /><a href="http://www.ommirishdance.com" target="_blank">Visit Site</a><br /><br /></span></div><img src="img/slider/omm.jpg" width="316" height="179" alt="" border="0" /></div>
6. <div class="slideContainer"><div class="textHover"><span><h5>KC Feis</h5>Built with Wordpress, HTML/CSS, jQuery, Illustrator and Photoshop<br /><br /><a href="http://www.kcfeis.com" target="_blank">Visit Site</a></span></div><img src="img/slider/kcfeis.jpg" width="316" height="179" alt="" border="0" /></div>
7. <div class="slideContainer"><div class="textHover"><span><h5>The Music Manning</h5>Built with Wordpress, HTML/CSS, jQuery, Illustrator and Photoshop<br /><br /><a href="http://www.themusicmanning.com" target="_blank">Visit Site</a></span></div><img src="img/slider/musicmanning.jpg" width="316" height="179" alt="" height="200" border="0" /></div>
8. </div>
9. </div>
10. </div>
jQuery
1. $(document).ready(function() {
3. ////Slider////
4. slideShow();
5. });
7. function slideShow() {
8. var current = $('#slideShow div.show');
9. var next = current.next().length ? current.next() : current.siblings().first();
11. current.fadeOut('slow').removeClass('show');
12. next.fadeIn('slow').addClass('show');
14. setTimeout(slideShow, 7000);
15. }
Thanks

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend