|
JavaScript - Change Photo On Check
hi
can anyone help me how can user change the photo on the same page my code is Code: <body>
<img src="photo1.cgi" style="cursor:move" align="left"/></div></th><br />
<a href="photo1.cgi" >photo1.cgi</a><br />
<a href="photo2.cgi" >photo2.cgi</a><br />
<a href="photo3.cgi" >photo3.cgi</a><br />
<a href="photo4.cgi" >photo4.cgi</a><br />
</body>
i want when user selects photo2 to change this Code: <img src="photo1.cgi" style="cursor:move" align="left"/></div></th><br /> to Code: <img src="photo2.cgi" style="cursor:move" align="left"/></div></th><br /> Thanx in advance Similar Tutorialshow to change placeholder text colour in javascript? Code: <script> // this is inside a html form form['height'].placeholder+="enter password"; </script> how do I change the text above from grey to a different colour? Also, how do I check for isnotanumber in a form submission? Code: if(isNaN(form['weight'].value)) {
console.log('use a number');
it still outputs that console.log error!!!!!!!!! On this webpage http://www.corkdiscos.com/testimonials.html i have a like button. when a user clicks like a comment box appears. when i unlike the button the comment box disappears this is ok but when a user has already liked the facebook page and comes to my webpage the comment box does not show. so im looking for a piece of javascript to check if a user has like the button on my page and if so to show the comment box. please check my source code of the website http://www.corkdiscos.com/testimonials.html to see what i have so far. any help would be greatly appreciated Hi guys. I'm working a bunch of pre existing code on a CMS. Just after a quick fix. Doing a show/hide thing on a particular div somewhere on the page depending if a checkbox is ticked or not. Currently there is 3 checkboxes that are dynamically added through the CMS. Here's simplified version of the form: Code: <form id="simplesearch" name="simplesearch"> <input type="checkbox" onclick='showhidefield(this.value)' name="meta_data_array_search_criteria[custom_profile_type][]" value="5" class="input-checkboxes" /> <input type="checkbox" onclick='showhidefield(this.value)' name="meta_data_array_search_criteria[custom_profile_type][]" value="4" class="input-checkboxes" /> </form> And here's the javascript I was playing with. Code: function showhidefield(id)
{
if(document.simplesearch.meta_data_array_search_criteria[custom_profile_type][''].checked) {
document.getElementById("profile_fields_wrapper_" + id).style.visibility = "visible";
}
else
{
document.getElementById("profile_fields_wrapper_" + id).style.visibility = "hidden";
}
}
Problem I'm having is how do i do a check to see if those checkboxes are checked in the javascript with those name arrays? How do i separate them? 'm guessing I have to loop through them or something?Hopefully that make senses - it's late here and I'm losing the plot Any pointers would be gratefully welcomed I am designing a custom wordpress blog for a client. He had asked for four sections to have a picture gallery fitting the format of the rest of the site with the simple functions of next and back. I found a gallery online ( http://www.web1marketing.com/photoviewer/ ) that had the elements I needed, customized the sizes. I made a working test version in the site that works great. http://californiaisaplace.com/cali/test/ When I added the same code into the full site the URL address is changing but the photos are not ? http://californiaisaplace.com/cali/c...os/#cannonball Not knowing Javascript I am having trouble troubleshooting the issues. Can any one give me any advice on this? Hi, I am somewhat new to javascript and website design, (as in I mostly try to follow tutorials to figure how stuff works) and was wondering how I would make a rotating photo slideshow (in js). Such as in the following sites: http://www.1stwebdesigner.com/wp-con...inal_small.jpg and http://www.1stwebdesigner.com/wp-con...inal_small.jpg (but instead of clicking on the photos to rotate, an arrow to rotate, such as in the first image/example) Thanks so much in advance Plz i want to make a photo gallery of many images... i want it to be enlarged with an effect.. i have a thumbnails images and large images i want the thumbnails to be enlarged with any effect and to be displayed on the same page .. can anyone send for me a new photo gallery effect? Hi! I've been working on a javascript photo gallery on my talent agency's website. I'm running into a bit of trouble with two things... First off, i would like it that when the mouse is removed from the thumbnail, that the image the mouse was last on would remain on screen but the thumbnail wouldnt change back. Also, i cant figure out how to make it that when an image is being displayed, the photographer and makeup artist information could also be seen under the picture. Any help in this would be GREATLY appreciated! A sample of one of the pages this is being used on is the following: http://www.cyanidenation.com/dakygallery.html The code I'm using is the following: Code: <!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
Thanks for the help! Hello, Do you know any HTML/Javascript/JQuery photo gallery which behave like this flash gallery? http://www.erwinolaf.com/#/portfolio..._2001/gallery/ The point is images : 1- Images does not show in a modal popup window. 2- When each thumbnail selected , current image animate to left and selected image also shown with comming from right to left. Thanks Mazdak Im new to javascript and I need to make a website for my computer science class that includes a photo gallery within a table and there has to be two buttons on top so you can scroll through the pictures.. a next and a back button. here is a link to the assignment http://montcs.bloomu.edu/110/Asns/As...-changer.shtml.. here is our teachers example http://myweb.bloomu.edu/rmontant/pictures-project.. I tried to make my website but i am stuck! heres the code for mine and if anybody could tell me what the hell im doing wrong it would be greatly appreciated.. Thanks in advance <html> <head> <title>GMC Duramax Photo Gallery</title> <style type="text/css"> p.pretty{ font-family: "Marker SD" ; font-size: 20pt ; } Img#pix { width:800px;} table {border-collapse: collapse; border: 8px inset rgb(255,140,0); width:800px; background: rgb(0,0,128); color: rgb(255,255,255); } td {border: 1px solid black; text-align: center;} </style> <script type="text/javascript"> var piclist = [ "Chevy1.jpg" , "GMC1.jpg" , "Ironhide.jpg" , "Chevy2.jpg" , "Monster.jpg" , "DenaliHD.jpg" , "DenaliHD1.jpg" , "3500HD.jpeg" , ] Var i = 0; function next() { var elt = document.getElementById "Chevy1.jpg", "GMC1.jpg", "Ironhjide.jpg", "Chevy2.jpg" el1.src = "images/" + piclist [ i ] ; el1.style.width = "800px" ; el1 = document.getElementDyId("caption") ; el1.innerHTML="number" +i+ ":" piclist[i] ; i=i+ 1;/ if (i>=piclist.length) i = 0; } function prev() { var elt = document.getElementById("pix") ; el1.src = "images/" + piclist [ i ] ; el1.style.width = "800px" ; el1 = document.getElementDyId("caption") ; el1.innerHTML="number" -i- ":" piclist[i] ; i=i+ 1;/" Comment: This counts UP, to next picture. "/ if (i>=piclist.length) i = 0; } </script> </head> <body> <p class="pretty"> GMC Trucks </p> <table> <tr><td> <button onclick="prev();"> Backward </button> <button onclick="next();"> Forward</button> </td></tr> <tr><td> <img id="chevy1.jpg" src="Chevy1.jpg"> </td></tr> <tr><td id="caption"> Lifted Chevy 2500HD</td></tr> </table> </body> </html> Hello - My question revolves around a photo slider that will automatically advance to the next photo in a matter of seconds. . . Before you write this thread off as, 'GO GOOGLE IT, THERE'S TONS OF CODE ALREADY OUT THERE IN THREADS LIKE THIS'. . . The tricky part of this is, I already have a photo slider that you advance by a button click and it transitions 2 portions of the page. It is a custom module in Joomla that just basically uses some custom HTML to display a picture on the left and text on the right. . .and you click the button and it advances to another picture and different text to match the image. HERE IS MY CURRENT HTML THAT DISPLAYS THE IMAGE AND TEXT Code: <div class="images"><!-- first slide --> <div><img class="img-slider" src="images/stories/slider_img_1.jpg" border="0" /> <span class="slider-text-indent"> <h3 class="slider-titile">We listen.</h3> <span class="slider-text">Tired of unreliable computer consultants who are impossible to reach, nickel and dime you, and fail to deliver results that you deserve?<br /><br />ABC Computers is here to help you!</span> </span></div> <!-- second slide --> <div><img class="img-slider" src="images/stories/slider_img_2.jpg" border="0" /> <span class="slider-text-indent"> <h3 class="slider-titile">We Guarantee.</h3> <span class="slider-text">We are committed to doing whatever is necessary, period. In our 25 history, we have never had a failed implementation; we guarantee yours will not be the first.</span> </span></div> <!-- third slide --> <div><img class="img-slider" src="images/stories/slider_img_3.jpg" border="0" /> <span class="slider-text-indent"> <h3 class="slider-titile">We Care.</h3> <span class="slider-text">We treat your network as if it was our own. We protect your data as if it was ours. We don't look at your budget as a mine of money; we won't ask you to spend one dollar that we wouldn't spend on our own network!</span> </span></div> </div> <p><a class="backward">prev</a> <a class="forward">next</a></p> <!-- the tabs --> <div class="tabs"><a></a> <a></a> <a></a></div> Again, I would like to make this advance automatically through javascript (or perhaps there's a better way). . . but I do not want to lose the functionality of moving it manually with the button too. Is this possible to do and if so, does anyone have suggestions? Typically this isn't an issue for me to figure out but since I already have it how the client wants it to look, they basically want it to move automatically as if someone pushed the button. . .but still keep the manual button to advance and reverse it. Thank you in advance for any advice or help on this matter. http://www.premierleague.com/page/Ga...047853,00.html
Dear all, I'm trying to use Javascript to have an array of images that load randomly AND work in a slideshow manner so change every 3 seconds (in a logical order). The code I have below presents a random image but how do I get them to continue from the random image and change to the next every 3 seconds? Code: <script language="JavaScript"> images = new Array(3); images[0] = "<a href = 'photo1.html'><img src='images/photo1.jpg' alt='Photo 1'></a>"; images[1] = "<a href = 'photo2.html'><img src='images/photo2.jpg' alt='Photo 2'></a>"; images[2] = "<a href = 'photo3.html'><img src='images/photo3.jpg' alt='Photo 3'></a>"; index = Math.floor(Math.random() * images.length); document.write(images[index]); </script> Kind regards Jon Hi Everyone, I am unable to find a JavaScript picture viewer that does what I would like it to do. I have created a wrapper div of specific size for the images to be displayed in. I want the thumbnail images to be horizontally at the top of the div and the "clicked" full-size image to appear within the same div, directly below the row of thumbnails. When a visitor opens the page the first image must be loaded automatically without having to click on the thumbnail. Can anyone point me in a direction please? Anita, Cape Town. I recently asked here about flash software for creating a gallery for my photoblog, but I now relaise I want something that's probably far more straight forward (I hope). What I want is for the first image in a set to load when the user clicks a category link (say Landscapes, for instance). Somewhere alongside the image will be a list of numbers or titles which, when hovered over with the mouse cursor, will change the image to the next in the set. Here's an example of exactly what I want: http://www.toddhido.com/ Hover over 'photographs >> homes at night >> houses' to get to one of the galleries. Is this simple coding? If it's not too much trouble, a very basic step-by-step on how I might acheive this would be very much appreciated. Is it possible to modify the code I am using in this example to create multiple photo galleries on the same page (basically one for each horse - set up exactly like the example)? There is also some CSS that is connected to this photo gallery. I know CSS a bit more than I know javascript...which I suppose isn't really saying much, since I don't know javascript at all. Also, how much of the code should I post, considering it's a multiple parter? Many thanks! Can anyone recommend a good photo gallery? My client would like to be able to upload her own photos and wants to be able to add captions (a must). Can anyone recommend a good canned galley, or let me know where I could find some code? I found an exellent free gallery called "Pure Gallery" which is a front end that works with "Gallery CMS" (backend). It is actually creates an swf file and has an interface for the client, but the problem is that it leaves about a 300 pixel gap at the top of the gallery and I cannot for the life of me figure out how to change it. It is awesome, but the gap at the top makes it useless to me. Thanks much. Buffmin. PS: If anyone wants to see what "Pure Gallery looks like, you can see it at this link to my site. http://q1ofakind.com/gallerycms/gallery.php
Hi I have a script that is driving me slightly crazy...I need to use different images as the thumbnails on this page. I want to use specified crops of the image rather than what is there now (the larger image squeezed down). Does anyone have any idea how I could do that? Thanks a million. http://www.annaleithauser.com/rosema...e/country.html I am having a problem with making the images come back after they are hidden by the hide me css. Html Code: <div class="photo_container"> <div class="sorting"> <div> <span>Filter photos by</span> <a class="sortLink selected" data-keyword="all" href="#">All categories</a> <a class="sortLink" data-keyword="creative" href="#">Creative</a> <a class="sortLink" data-keyword="portrait" href="#">Portrait</a> <a class="sortLink" data-keyword="event" href="#">Event</a> <a class="sortLink" data-keyword="advertising" href="#">Advertising</a> <a class="sortLink" data-keyword="nature" href="#">Nature</a> <a class="sortLink" data-keyword="architecture" href="#">Architecture</a> <a class="sortLink" data-keyword="model" href="#">Model</a> <a class="sortLink" data-keyword="food" href="#">Food</a> <div class="clear-fix"></div> </div> </div> <div class="photos"> <div class="thumbnail_container"> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> </div> </div> <div class="debug-size" style="position:absolute; bottom:0px; left:5px">debug size</div> <div class="debug-remainder" style="position:absolute; bottom:25px; left:5px">debug remainder</div> </div> Javascript Code: var thumbnailSpacing = 15; $(document).ready(function(){ $('.photo_container .sorting a.sortLink').on('click', function(e){ e.preventDefault(); $('.photo_container .sorting div a.sortLink').removeClass('selected'); $(this).addClass('selected'); var keyword = $(this).attr('data-keyword'); alert(keyword +' keywordset sort link'); sortThumbnails(keyword); }); $('.photo_container .sorting').css('margin-bottom', window.thumbnailSpacing+'px'); $('.photo_container .photos .thumbnail_container a.thumbnail').addClass('showMe'); positionThumbnails(); }); function sortThumbnails (keyword){ //alert(keyword); $('.photo_container .photos .thumbnail_container a.thumbnail').each(function(){ var thumbnailKeywords = $(this).attr('data-keywords'); //alert(thumbnailKeywords +' keyword thumbs'); if(keyword == 'all'){ $(this).addClass('showMe').removeClass('hideMe'); }else{ if(thumbnailKeywords.indexOf(keyword) != -1){ //alert(thumbnailKeywords.indexOf(keyword) +' index keyword'); $(this).addClass('showMe').removeClass('hideMe'); }else{ $(this).addClass('hideMe').removeClass('showMe'); } } }); positionThumbnails(); }; function positionThumbnails(){ /* debug */ $('.debug-remainder').html(''); $('.photo_container .photos .thumbnail_container a.thumbnail.hideMe').animate({opacity:0}, 500, function(){ $(this).css({ 'display':none, 'top':'0px', 'left':'0px' }); }); var containerWidth = $('.photo_container .photos').width(); var thumbnail_R = 0; var thumbnail_C = 0; var thumbnailWidth = $('.photo_container .photos .thumbnail_container a.thumbnail img:first-child').outerWidth() + window.thumbnailSpacing; var thumbnailHeight = $('.photo_container .photos .thumbnail_container a.thumbnail img:first-child').outerHeight() + window.thumbnailSpacing; var max_C = Math.floor(containerWidth / thumbnailWidth); $('.photo_container .photos .thumbnail_container a.thumbnail.showMe').each(function(index){ var remainder = (index%max_C)/100; var maxIndex = 0; /* debug */ $('.photo_container .debug-remainder').append(remainder+' - '); if(remainder == 0){ if(index != 0){ thumbnail_R += thumbnailHeight; } thumbnail_C = 0; }else{ thumbnail_C += thumbnailWidth; } $(this).css('display','block').animate({ 'opaciry':1, 'top':thumbnail_R+'px', 'left':thumbnail_C+'px' }, 500); var newWidth = max_C + thumbnailWidth; var newHeight = thumbnail_R + thumbnailHeight; $('.photo_container .photos .thumbnail_container').css({ 'width': newWidth + 'px', 'height': newHeight + 'px' }); }); } Thank you ahead of time for any help given... my brain hurts! HI friends., i am having a problem with using image slider script and pretty photo in one page. i have hosting website at two diffrent places. it is working fine here...http://codersonline.co.cc/sgreens-de...hp?option=unit but giving problem at http://www.savitrygreens.com/DeMo/index.php?option=unit really frustrated... don't know how to use noconflict method please help.. |
|||||||