August 30, 201114 yr Hi, I am currently working for a client and I am struggling to find the code to which produces this effect. I think I have been staring at the code too long and it's all coming together like giant mess. On top of that I only know the basics of Javascript not very much. Basically, I am looking for the code which displays the large image at the right hand side of this page. http://www.emmafranklin.net/bird/ as I would like to link the image to their respective product in the shop page. The application is built on top of wordpress. Here is the source for this particular page. I can post header and footer code if needed as well. <div align="center" id="container" onmouseout="document.getElementById('slidenav-captions').innerHTML = ''"> <div class="sliderGallery"> <ul id="sliderGalleryInitPos"> <li><a href="/bird/"><span class="animalbox" id="bird" onmouseover="document.getElementById('slidenav-captions').innerHTML = 'Bird'"></span></a></li> <li><a href="/bull/"><span class="animalbox" id="bull" onmouseover="document.getElementById('slidenav-captions').innerHTML = 'Bull'"></span></a></li> <li><a href="/dog/"><span class="animalbox" id="dog" onmouseover="document.getElementById('slidenav-captions').innerHTML = 'Dog'"></span></a></li> <li><a href="/goat/"><span class="animalbox" id="goat" onmouseover="document.getElementById('slidenav-captions').innerHTML = 'Goat'"></span></a></li> <li><a href="/goose/"><span class="animalbox" id="goose" onmouseover="document.getElementById('slidenav-captions').innerHTML = 'Goose'"></span></a></li> <li><a href="/hippo/"><span class="animalbox" id="hippo" onmouseover="document.getElementById('slidenav-captions').innerHTML = 'Hippo'"></span></a></li> <li><a href="/horse/"><span class="animalbox" id="horse" onmouseover="document.getElementById('slidenav-captions').innerHTML = 'Horse'"></span></a></li> <li><a href="/pearls/"><span class="animalbox" id="pearls" onmouseover="document.getElementById('slidenav-captions').innerHTML = 'Pearls'"></span></a></li> <li><a href="/pheasant/"><span class="animalbox" id="pheasant" onmouseover="document.getElementById('slidenav-captions').innerHTML = 'Pheasant'"></span></a></li> <li><a href="/pig/"><span class="animalbox" id="pig" onmouseover="document.getElementById('slidenav-captions').innerHTML = 'Pig'"></span></a></li> <li><a href="/ram/"><span class="animalbox" id="ram" onmouseover="document.getElementById('slidenav-captions').innerHTML = 'Ram'"></span></a></li> <li><a href="/rhino/"><span class="animalbox" id="rhino" onmouseover="document.getElementById('slidenav-captions').innerHTML = 'Rhinoceros'"></span></a></li> <li><a href="/shotgun/"><span class="animalbox" id="shotgun" onmouseover="document.getElementById('slidenav-captions').innerHTML = 'Shotgun'"></span></a></li> <li><a href="/stag/"><span class="animalbox" id="stag" onmouseover="document.getElementById('slidenav-captions').innerHTML = 'Stag'"></span></a></li> <li><a href="/tiger/"><span class="animalbox" id="tiger" onmouseover="document.getElementById('slidenav-captions').innerHTML = 'Tiger'"></span></a></li> <li><a href="/triceratops/"><span class="animalbox" id="triceratops" onmouseover="document.getElementById('slidenav-captions').innerHTML = 'Triceratops'"></span></a></li> </ul> <div class="slider"> <div class="handle" id="handleInitPos"></div> </div> </div> <div id="slidenav-captions"></div> </div> <style type="text/css" media="screen"> #collection-toplink {color:#000;} #bird.animalbox {opacity:1;} </style> <div id="pagepicture"></div> <div id="textblock"> <strong>BIRD</strong> Flamingos are pink because they eat so many shrimps </div> <div id="gwrapper"> <ul class="gallery_container"> <li class="active"><img src="/images/bird/bird_rings.jpg" alt="Bird Rings" title="Bird Rings" /></li> <li><img src="/images/bird/bird_pearl_necklace_gold.jpg" alt="Bird Pearl Necklace" title="Bird Pearl Necklace" /> </li> <li><img src="/images/bird/bird_lrg_silver_chain_gold_btb.jpg" alt="Bird Large Chain" title="Bird Large Chain" /></li> <li><img src="/images/bird/bird_sm_black_chain_gold_stb.jpg" alt="Bird Small Chain" title="Bird Small Chain" /></li> </ul> </div> If you need any more code, just let me know I would be happy to help out. Also any help on this situation would be greatly appreciated. Cheers, Glen
August 30, 201114 yr The Javascript looks for #pagepicture then slots in the right image. This is the Javascript that does it ; I don't know where it's located though. Perhaps header.php or footer.php <script type="text/javascript"> jQuery(function($) { var container = $('div.sliderGallery'); var ul = $('ul', container); var itemsWidth = ul.innerWidth() - container.outerWidth(); $('.slider', container).slider({ min: 0, max: itemsWidth, handle: '.handle', stop: function (event, ui) { ul.animate({'left' : ui.value * -1}, 500); }, slide: function (event, ui) { ul.css('left', ui.value * -1); } }); $('.gallery_container').addClass('gallery'); // adds new class name to maintain degradability $('ul.gallery').galleria({ history : true, // activates the history object for bookmarking, back-button etc. clickNext : true, // helper for making the image clickable insert : '#pagepicture', // the containing selector for our main image onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes // fade in the image and caption if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow image.css('display','none').fadeIn(1000); } caption.css('display','none').fadeIn(1000); // fetch the thumbnail container var _li = thumb.parents('li'); // fade out inactive thumbnail _li.siblings().children('img.selected').fadeTo(500,0.6); // fade in active thumbnail thumb.fadeTo('fast',1).addClass('selected'); // add a title for the clickable image // image.attr('title','Next image >>'); }, onThumb : function(thumb) { // thumbnail effects goes here // fetch the thumbnail container var _li = thumb.parents('li'); // if thumbnail is active, fade all the way. var _fadeTo = _li.is('.active') ? '1' : '0.6'; // fade in the thumbnail when finnished loading thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500); // hover effects thumb.hover( function() { thumb.fadeTo('fast',1); }, function() { _li.not('.active').children('img').fadeTo('fast',0.6); } // don't fade out if the parent is active ) } }); }); </script>
August 31, 201114 yr Author The Javascript looks for #pagepicture then slots in the right image. This is the Javascript that does it ; I don't know where it's located though. Perhaps header.php or footer.php <script type="text/javascript"> jQuery(function($) { var container = $('div.sliderGallery'); var ul = $('ul', container); var itemsWidth = ul.innerWidth() - container.outerWidth(); $('.slider', container).slider({ min: 0, max: itemsWidth, handle: '.handle', stop: function (event, ui) { ul.animate({'left' : ui.value * -1}, 500); }, slide: function (event, ui) { ul.css('left', ui.value * -1); } }); $('.gallery_container').addClass('gallery'); // adds new class name to maintain degradability $('ul.gallery').galleria({ history : true, // activates the history object for bookmarking, back-button etc. clickNext : true, // helper for making the image clickable insert : '#pagepicture', // the containing selector for our main image onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes // fade in the image and caption if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow image.css('display','none').fadeIn(1000); } caption.css('display','none').fadeIn(1000); // fetch the thumbnail container var _li = thumb.parents('li'); // fade out inactive thumbnail _li.siblings().children('img.selected').fadeTo(500,0.6); // fade in active thumbnail thumb.fadeTo('fast',1).addClass('selected'); // add a title for the clickable image // image.attr('title','Next image >>'); }, onThumb : function(thumb) { // thumbnail effects goes here // fetch the thumbnail container var _li = thumb.parents('li'); // if thumbnail is active, fade all the way. var _fadeTo = _li.is('.active') ? '1' : '0.6'; // fade in the thumbnail when finnished loading thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500); // hover effects thumb.hover( function() { thumb.fadeTo('fast',1); }, function() { _li.not('.active').children('img').fadeTo('fast',0.6); } // don't fade out if the parent is active ) } }); }); </script> Thanks for your help, Glowbridge. I am going to have to call on your expertise once again, would it be possible for me to make the image a link by modifying that code. Each image has it's on product link but I am not sure how I could manipulate that and modify that so that when the larger image is clicked the user is taken to the respective product page. Cheers, Glen
September 1, 201114 yr Author Thanks for your help, Glowbridge. I am going to have to call on your expertise once again, would it be possible for me to make the image a link by modifying that code. Each image has it's on product link but I am not sure how I could manipulate that and modify that so that when the larger image is clicked the user is taken to the respective product page. Cheers, Glen I made a start on this but I am not sure if I am heading in the right direction or not, anyway the problem I have got now is adding the link to the image. The reason I think it is not working is that the image is loading after the script therfore HTML is not being changed. Just my theory though therefore may be wrong. Here is the code I have got so far. <script> $(document).ready(function(){ var a = $('.galleria_wrapper').children('img').attr('src'); if(a == '/images/bird/bird_rings.jpg') { $('.galleria_wrapper').html('<a href="google.com"><img src="/images/bird/bird_rings.jpg" alt="Bird Rings" title="Bird Rings" /></a>'); } }); <script> Any help on this wood be good. Thanks, Glen
September 1, 201114 yr would it be possible for me to make the image a link by modifying that code. No, the image would be called in the html file or PHP file, you add the link there:- <a href="link"><img scr="image"/></a>
September 2, 201114 yr I made a start on this but I am not sure if I am heading in the right direction or not, anyway the problem I have got now is adding the link to the image. The reason I think it is not working is that the image is loading after the script therfore HTML is not being changed. Just my theory though therefore may be wrong. Here is the code I have got so far. <script> $(document).ready(function(){ var a = $('.galleria_wrapper').children('img').attr('src'); if(a == '/images/bird/bird_rings.jpg') { $('.galleria_wrapper').html('<a href="google.com"><img src="/images/bird/bird_rings.jpg" alt="Bird Rings" title="Bird Rings" /></a>'); } }); <script> Any help on this wood be good. Thanks, Glen Hi Glen, You can simply convert dat image into an button and redirect the user to another page. <input type="image" src="<url of your image>" title="" /> Edited September 2, 201114 yr by zed remove crap from post
September 8, 201114 yr Hi Glen1, I have looked at your postings and have actually achieved what you are after. Here is my work. Have a look at the code of the page and see if it is of any help: http://www.rig-designs.com/solfruit/home.html
Create an account or sign in to comment