PDA

View Full Version : Image Thumbnail Viewer II Install help



jwstimac
02-12-2011, 07:58 AM
1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

3) Describe problem: Im a noob and have searched high and low for more details on how to install this script but to no avail. I am trying to get a photo viewer installed on my wordpress site and have some questions. I am using WP table reloaded to position the photos.

The page i am working on: My Site (http://renewableassociates.com/wordpress/?page_id=314)

I have everything placed correctly I think, but the images load in a separate page, not where there supposed to.

Some really noob questions:
1. Where am i supposed to place the script?
2. Where am I supposed to place the two files after download? (My wordpress site is not in the main directory of my web page)
3. How am i supposed to edit the "loadmsg" variable inside the thumbnailviewer2.js file?

Thank you for any help. It is greatly appreciated.
-John

jwstimac
02-13-2011, 03:50 AM
Here is the script that I have placed in the <head> section of my page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://renewableassociates.com/wordpress/wp-content/uploads/2011/02/thumbnailviewer2.js">

/***********************************************
* Image Thumbnail Viewer II script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>
This is the code that I have in the body of my page:


<div id="loadarea" style="width:400px;height:300px"><img src="http://renewableassociates.com/wordpress/wp-content/uploads/2011/02/Lemelson-Front.jpg" alt="" title="Lemelson Front" width="400" height="300" class="alignleft size-full wp-image-413" /></div>

<a href="http://renewableassociates.com/wordpress/wp-content/uploads/2011/02/Lemelson-Front.jpg" rel="enlargeimage::click" rev="targetdiv:loadarea"><img src="http://renewableassociates.com/wordpress/wp-content/uploads/2011/02/Lemelson-Front-150x150.jpg" alt="" title="Lemelson Front" width="93" height="93" class="alignleft" size-thumbnail wp-image-413" /></a>

<a href="http://renewableassociates.com/wordpress/wp-content/uploads/2011/02/Lemelson.jpg" rel="enlargeimage::click" rev="targetdiv:loadarea"><img src="http://renewableassociates.com/wordpress/wp-content/uploads/2011/02/Lemelson-150x150.jpg" alt="" title="Lemelson West" width="93" height="93" class="alignleft" size-thumbnail wp-image-390" /></a>

<a href="http://renewableassociates.com/wordpress/wp-content/uploads/2011/02/Lemelson-East4.jpg" rel="enlargeimage::click" rev="targetdiv:loadarea"><img src="http://renewableassociates.com/wordpress/wp-content/uploads/2011/02/Lemelson-East4-150x150.jpg" alt="" title="Lemelson East" width="93" height="93" class="alignleft" size-thumbnail wp-image-392" /></a>

and this is the thumbnailviewer2.js

/*Image Thumbnail Viewer II (May 19th, 2010)
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//Last updated: Sept 26th, 2010: http://www.dynamicdrive.com/forums/showthread.php?t=57892

jQuery.noConflict()

jQuery.thumbnailviewer2={
loadmsg: '<img src="http://renewableassociates.com/wordpress/wp-content/uploads/2011/02/spinningred.gif" /><br />Loading Large Image...', //HTML for loading message. Make sure image paths are correct

/////NO NEED TO EDIT BEYOND HERE////////////////

dsetting: {trigger:'mouseover', preload:'yes', fx:'fade', fxduration:500, enabletitle:'yes'}, //default settings
buildimage:function($, $anchor, setting){
var imghtml='<img src="'+$anchor.attr('href')+'" style="border-width:0" />'
if (setting.link)
imghtml='<a href="'+setting.link+'">'+imghtml+'</a>'
imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'
return $(imghtml)
},

showimage:function($image, setting){
$image.stop()[setting.fxfunc](setting.fxduration, function(){
if (this.style && this.style.removeAttribute)
this.style.removeAttribute('filter') //fix IE clearType problem when animation is fade-in
})
}

}


jQuery.fn.addthumbnailviewer2=function(options){
var $=jQuery

return this.each(function(){ //return jQuery obj
if (this.tagName!="A")
return true //skip to next matched element

var $anchor=$(this)
var s=$.extend({}, $.thumbnailviewer2.dsetting, options) //merge user options with defaults
s.fxfunc=(s.fx=="fade")? "fadeIn" : "show"
s.fxduration=(s.fx=="none")? 0 : parseInt(s.fxduration)
if (s.preload=="yes"){
var hiddenimage=new Image()
hiddenimage.src=this.href
}
var $loadarea=$('#'+s.targetdiv)
var $hiddenimagediv=$('<div />').css({position:'absolute',visibility:'hidden',left:-10000,top:-10000}).appendTo(document.body) //hidden div to load enlarged image in
var triggerevt=s.trigger+'.thumbevt' //"click" or "mouseover"
$anchor.unbind(triggerevt).bind(triggerevt, function(){
if ($loadarea.data('$curanchor')==$anchor) //if mouse moves over same element again
return false
$loadarea.data('$curanchor', $anchor)
if ($loadarea.data('$queueimage')){ //if a large image is in the queue to be shown
$loadarea.data('$queueimage').unbind('load') //stop it first before showing current image
}
$loadarea.html($.thumbnailviewer2.loadmsg)
var $hiddenimage=$hiddenimagediv.find('img')
if ($hiddenimage.length==0){ //if this is the first time moving over or clicking on the anchor link
var $hiddenimage=$('<img src="'+this.href+'" />').appendTo($hiddenimagediv) //populate hidden div with enlarged image
$hiddenimage.bind('loadevt', function(e){ //when enlarged image has fully loaded
var $targetimage=$.thumbnailviewer2.buildimage($, $anchor, s).hide() //create/reference actual enlarged image
$loadarea.empty().append($targetimage) //show enlarged image
$.thumbnailviewer2.showimage($targetimage, s)
})
$loadarea.data('$queueimage', $hiddenimage) //remember currently loading image as image being queued to load
}

if ($hiddenimage.get(0).complete)
$hiddenimage.trigger('loadevt')
else
$hiddenimage.bind('load', function(){$hiddenimage.trigger('loadevt')})
return false
})
})
}

jQuery(document).ready(function($){
var $anchors=$('a[rel="enlargeimage"]') //look for links with rel="enlargeimage"
$anchors.each(function(i){
var options={}
var rawopts=this.getAttribute('rev').split(',') //transform rev="x:value1,y:value2,etc" into a real object
for (var i=0; i<rawopts.length; i++){
var namevalpair=rawopts[i].split(/:(?!\/\/)/) //avoid spitting ":" inside "http://blabla"
options[jQuery.trim(namevalpair[0])]=jQuery.trim(namevalpair[1])
}
$(this).addthumbnailviewer2(options)
})
})

Thanks for any help.
-John

azoomer
02-13-2011, 12:19 PM
Here is a copy of a section of the sourcecode on your page:


<style type="text/css">
.entry-meta {display:none;}
.entry-utility {display:none;}
#wrapper {margin-top: 10px;}
#site-title, #site-description {display: none; }
.one-column #container { width:940px; float:left; margin: 0px 0px 0px 0px; }
.one-column #content { width: 940px; margin: 0px 0px 0px 0px; overflow:hidden;
padding: 0px 0px 0px 0px; }
<!--Good Above-->

.wvr-twocolumn #container { width:940px; float:left; margin: 0px 0px 0px 0px; }
.wvr-twocolumn #content { width: 590px; margin: 0px 0px 0px 0px; overflow:hidden;
padding: 0px 0px 0px 0px; }

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://renewableassociates.com/wordpress/wp-content/uploads/2011/02/thumbnailviewer2.js">

/***********************************************
* Image Thumbnail Viewer II script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
</style>

From what I can see, the scripts are located inside the style tags and that could be the reason it isn't working. Try instead putting the scripts outside and after the css style tags.

jwstimac
02-13-2011, 08:39 PM
Thank you! That was so easy it's ridiculous. To think how long I tried to get that too work. :) Thanks again