Results 1 to 2 of 2

Thread: Image Thumbnail Viewer II Small Thumbs Open a new page?

  1. #1
    Join Date
    Dec 2005
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Image Thumbnail Viewer II Small Thumbs Open a new page?

    1) Script Title: Image Thumbnail Viewer II

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

    3) Describe problem: Sorry to post about this again. I tried the solution for opening in a pop up window and it will not work for my application.

    Instead I have an easy request -- been searching for over 3 hours now. All I want to do is have the small thumbnail (in this case I have changed the small thumbnails into simple text) to open a html page instead of the enlarged version of the thumbnail.

    I've followed these two threads:
    http://www.dynamicdrive.com/forums/s...ad.php?t=25787
    http://www.dynamicdrive.com/forums/a...p/t-25787.html

    But the problem is that I am using a modified version of the .js file provided by one of the DD admins so those instructions don't work.

    So here is my modified .js and can anyone tell me what i need to change to make this simple request?

    #####################

    /*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/s...ad.php?t=57892
    //Unofficial update Oct 4 2010: http://www.dynamicdrive.com/forums/s...1&postcount=27

    jQuery.noConflict()

    jQuery.thumbnailviewer2={
    loadmsg: '<img src="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', descriptiontop:'no', hidetitle:'no'}, //default settings
    buildimage:function($, $anchor, setting){
    var imghtml='<img src="'+$anchor.attr('href')+'" style="border-width:0" />',
    title = $anchor.attr('title') || $anchor.attr('data-title') || $anchor.data('title') || '';
    if (setting.link)
    imghtml='<a href="'+setting.link+'">'+imghtml+'</a>'
    imghtml = setting.descriptiontop === 'yes'? '<div>'+(setting.enabletitle!='no' && title? title + '<br />' : '') + imghtml + '</div>' :
    '<div>'+imghtml+(setting.enabletitle!='no' && title? '<br />' + 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
    }
    if(s.hidetitle === 'yes'){
    $anchor.data('title', this.title).removeAttr('title');
    }
    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)
    })
    })
    #####################################

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Please enclose code in:

    [CODE]
    code goes here
    [/CODE]

    tags so it will look like:

    Code:
    code goes here
    Anyways, your question is unclear. I thought I had answered it here:

    http://www.dynamicdrive.com/forums/s...27&postcount=8

    in our other thread together. If that didn't work for you, you should have responded there with/for clarification, rather than open a new thread.

    But here we are. No big deal.

    What exactly do you want to do and in response to what action on the user's part?

    Right now I'm assuming that onmouseover of the trigger, you want the user to see the enlarged image in the loadarea, which already happens. In addition to that, you want the onclick of the trigger to load a new page in the browser, taking the user away from (replacing) the gallery page.

    If so, my response in the other thread will do that. If you have something else in mind, please be more specific.

    BTW, the two links in your post to other threads ("I've followed these two threads:") are for a previous version of the script.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •