homepage Welcome to WebmasterWorld Guest from 54.204.68.109
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
usability problem and jquery fix
dupalo




msg:4345735
 12:55 pm on Jul 30, 2011 (gmt 0)

Hi there,
just noticed something on my site [antobbo.webspace.virginmedia.com...]
The only way to change picture is to click on the left hand-side menu, but when you scroll down say to change the last pictures you lose the big picture in the middle and then you have to scroll all the way up again to view it.
I thought of a couple of solutions:
- add a overflow, so that I have a scroll bar, but I don't want to go down that way because I would have to change the size of all the divs I think;
- have a "next" button just below the big pic in the middle that, with a jquery script, lets me change the pix without using the left hand-side menu;

- any other (reasonably easypls) option you guys could think of?

ABout the jquery script, it doesn't seem to be that easy after all - knowing just a little about jquery. I had a first stab at it but I am not entirely sure how to continue. Here's what I have done:

In the body I added the next button:

<div class="next_button"><!-- NEXT BUTTON-->
<a href="javascript:void(0);" onClick="nextPicture()">Next</a>
</div><!-- END OF NEXT BUTTON -->


then I started the script:
<script type="text/javascript">
<!--
/*NEXT PICTURE */
$(document).ready(function()
{
var mainPictures = ["images/gloom_full_1", "images/gloom_full_2", "images/gloom_full_3", "images/gloom_full_4", "images/gloom_full_5", "images/gloom_full_6", "images/gloom_full_7", "images/gloom_full_8", "images/gloom_full_9", "images/gloom_full_10", "images/gloom_full_11", "images/gloom_full_12", "images/gloom_full_13", "images/gloom_full_14", "images/gloom_full_15", "images/gloom_full_16", "images/gloom_full_17", "images/gloom_full_18", "images/gloom_full_19", "images/gloom_full_20", "images/gloom_full_21", "images/gloom_full_22", "images/gloom_full_23", "images/gloom_full_24", "images/gloom_full_25", "images/gloom_full_26", "images/gloom_full_27" ];

var thumbPictures = ["images/gloom_thumb_1", "images/gloom_thumb_2", "images/gloom_thumb_3", "images/gloom_thumb_4", "images/gloom_thumb_5", "images/gloom_thumb_6", "images/gloom_thumb_7", "images/gloom_thumb_8", "images/gloom_thumb_9", "images/gloom_thumb_10", "images/gloom_thumb_11", "images/gloom_thumb_12", "images/gloom_thumb_13", "images/gloom_thumb_14", "images/gloom_thumb_15", "images/gloom_thumb_16", "images/gloom_thumb_17", "images/gloom_thumb_18", "images/gloom_thumb_20", "images/gloom_thumb_21", "images/gloom_thumb_22", "images/gloom_thumb_23", "images/gloom_thumb_24", "images/gloom_thumb_25", "images/gloom_thumb_26", "images/gloom_thumb_27"];

var thumbShadedPictures = ["images/gloom_thumb_shad_1", "images/gloom_thumb_shad_2", "images/gloom_thumb_shad_3", "images/gloom_thumb_shad_4", "images/gloom_thumb_shad_5", "images/gloom_thumb_shad_6", "images/gloom_thumb_shad_7", "images/gloom_thumb_shad_8", "images/gloom_thumb_shad_9", "images/gloom_thumb_shad_10", "images/gloom_thumb_shad_11", "images/gloom_thumb_shad_12", "images/gloom_thumb_shad_13", "images/gloom_thumb_shad_14", "images/gloom_thumb_shad_15", "images/gloom_thumb_shad_16", "images/gloom_thumb_shad_17", "images/gloom_thumb_shad_18", "images/gloom_thumb_shad_19", "images/gloom_thumb_shad_20", "images/gloom_thumb_shad_21", "images/gloom_thumb_shad_22", "images/gloom_thumb_shad_23", "images/gloom_thumb_shad_24", "images/gloom_thumb_shad_25", "images/gloom_thumb_shad_26", "images/gloom_thumb_shad_27"];

mainPictures.current = 0;
thumbPictures = 0;
thumbShadedPictures = 0;

function nextPicture()
{
$("pic_1").fadeOut(2000, function()
{
$(this).attr('src',mainPictures[1]).fadeIn(2000)

});
}
});


//-->
</head>


Let me explain what I was attempting to do. I created 3 arrays mainPictures, thumbPictures and thumbShadedPictures because when I click on a thumbnail on the left the big picture in the middle changes and the thumbnail becomes shaded. Then when I click on a another thumbnail, the previous one goes back to normal and the selected one turns shaded and so on, hope it is clear. So what I want to do with the arrays is to make sure that all that happens.
So in
function nextPicture() I grab the id pic_1 which is referenced in the body of the page <img src="images/gloom_full_1.jpg" alt="" id="pic_1"> and which contains the first main picture I let it fade out and I replace it with the second picture in the array, but obviously it is not working... any advice (especially if there is an easier way pls)
thanks

 

dupalo




msg:4345772
 2:50 pm on Jul 30, 2011 (gmt 0)

ah, I have been working a couple of hours on it and came u with something, still not successful but at least I managed to fade out the main picture using the button. Here's the script, with some amendments:
<script type="text/javascript">
<!--
/*NEXT PICTURE */



function nextPicture()
{
var mainPictures = ["images/gloom_full_1.jpg", "images/gloom_full_2.jpg", "images/gloom_full_3.jpg", "images/gloom_full_4.jpg", "images/gloom_full_5.jpg", "images/gloom_full_6.jpg", "images/gloom_full_7.jpg", "images/gloom_full_8.jpg", "images/gloom_full_9.jpg", "images/gloom_full_10.jpg", "images/gloom_full_11.jpg", "images/gloom_full_12.jpg", "images/gloom_full_13.jpg", "images/gloom_full_14.jpg", "images/gloom_full_15.jpg", "images/gloom_full_16.jpg", "images/gloom_full_17.jpg", "images/gloom_full_18.jpg", "images/gloom_full_19.jpg", "images/gloom_full_20jpg", "images/gloom_full_21.jpg", "images/gloom_full_22.jpg", "images/gloom_full_23.jpg", "images/gloom_full_24.jpg", "images/gloom_full_25.jpg", "images/gloom_full_26.jpg", "images/gloom_full_27.jpg" ];
var thumbPictures = ["images/gloom_thumb_1.jpg", "images/gloom_thumb_2.jpg", "images/gloom_thumb_3.jpg", "images/gloom_thumb_4.jpg", "images/gloom_thumb_5.jpg", "images/gloom_thumb_6.jpg", "images/gloom_thumb_7.jpg", "images/gloom_thumb_8.jpg", "images/gloom_thumb_9.jpg", "images/gloom_thumb_10.jpg", "images/gloom_thumb_11.jpg", "images/gloom_thumb_12.jpg", "images/gloom_thumb_13.jpg", "images/gloom_thumb_14.jpg", "images/gloom_thumb_15.jpg", "images/gloom_thumb_16.jpg", "images/gloom_thumb_17.jpg", "images/gloom_thumb_18.jpg", "images/gloom_thumb_20.jpg", "images/gloom_thumb_21.jpg", "images/gloom_thumb_22.jpg", "images/gloom_thumb_23.jpg", "images/gloom_thumb_24.jpg", "images/gloom_thumb_25.jpg", "images/gloom_thumb_26.jpg", "images/gloom_thumb_27.jpg"];
var thumbShadedPictures = ["images/gloom_thumb_shad_1.jpg", "images/gloom_thumb_shad_2.jpg", "images/gloom_thumb_shad_3.jpg", "images/gloom_thumb_shad_4.jpg", "images/gloom_thumb_shad_5.jpg", "images/gloom_thumb_shad_6.jpg", "images/gloom_thumb_shad_7.jpg", "images/gloom_thumb_shad_8.jpg", "images/gloom_thumb_shad_9.jpg", "images/gloom_thumb_shad_10.jpg", "images/gloom_thumb_shad_11.jpg", "images/gloom_thumb_shad_12.jpg", "images/gloom_thumb_shad_13.jpg", "images/gloom_thumb_shad_14.jpg", "images/gloom_thumb_shad_15.jpg", "images/gloom_thumb_shad_16.jpg", "images/gloom_thumb_shad_17.jpg", "images/gloom_thumb_shad_18.jpg", "images/gloom_thumb_shad_19.jpg", "images/gloom_thumb_shad_20.jpg", "images/gloom_thumb_shad_21.jpg", "images/gloom_thumb_shad_22.jpg", "images/gloom_thumb_shad_23.jpg", "images/gloom_thumb_shad_24.jpg", "images/gloom_thumb_shad_25.jpg", "images/gloom_thumb_shad_26.jpg", "images/gloom_thumb_shad_27.jpg"];
var current_picture = 1;

mainPictures.current = 0;
thumbPictures = 0;
thumbShadedPictures = 0;
var current_picture = 1;

$("#pic_1").fadeOut(2000, function()
{
while(current_picture<mainPicture.length)
{
$("#pic_1").attr('src',mainPictures[current_picture]).fadeIn(2000);
}
current_picture++;
});
}




//-->
</script>
</head>

As said, that fade out the big pucture on the page, but the second part of it doesn't work, as in I can't fade in the next picture in the array for whatever reason

daveVk




msg:4346091
 6:48 am on Aug 1, 2011 (gmt 0)


var p = $("#pic_1");
function doNext() {
p.fadeOut(2000, function() {
// after fade out
current_picture++;
if ( current_picture === mainPicture.length ) { current_picture=0; }
p.attr('src',mainPictures[current_picture]);
p.fadeIn(2000,doNext); // after fade in, repeat doNext
};
};
doNext(); // start process

dupalo




msg:4347785
 3:55 pm on Aug 4, 2011 (gmt 0)

Thanks for that daveVk...it looks quite simple and I wasted so much time on it.
thanks again

daveVk




msg:4348032
 12:50 am on Aug 5, 2011 (gmt 0)

Minor correction last 3 lines

});
}
doNext(); // start process

I rely on jsLint (to much) to pick up these type of slips.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved