amitamberker Posted July 8, 2012 Share Posted July 8, 2012 (edited) Hello EveryOne, 1. Please find the attached "Test.html" and "jquery.imageWarp - Copy.txt" files.2. Please ReName the "jquery.imageWarp - Copy.txt" file as "jquery.imageWarp.js" (Because, this Forum did not allow me to attach .js files)So, how do make that target="_blank" from Test.html file open in New Browser? Do I need to add something in my "jquery.imageWarp.js" file? Edited July 8, 2012 by creative1977 Link to comment Share on other sites More sharing options...
Guest So Called Posted July 8, 2012 Share Posted July 8, 2012 Please post only the relevant part of your code. Forum members are unlikely to want to bother downloading your files. Isn't it really just one line of code? Why don't you just give an example? Link to comment Share on other sites More sharing options...
Ingolme Posted July 8, 2012 Share Posted July 8, 2012 Do you mean a new window, as opposed to a new tab? Link to comment Share on other sites More sharing options...
amitamberker Posted July 8, 2012 Author Share Posted July 8, 2012 Please post only the relevant part of your code. Forum members are unlikely to want to bother downloading your files. Isn't it really just one line of code? Why don't you just give an example? Hi So Called,Forum did not allow me to Paste the JS Code. No No... It's not just one line of code. The code is big. Link to comment Share on other sites More sharing options...
amitamberker Posted July 8, 2012 Author Share Posted July 8, 2012 Do you mean a new window, as opposed to a new tab? Hi Ingolme,Anything is fine. But it's not working. Please download the files and rename that "jquery.imageWarp - Copy.txt" file as "jquery.imageWarp.js" and then Click that Image on "Text.html" file. I think I have done something wrong. Maybe something needs to be added in .js file. Request you to please check the files. Link to comment Share on other sites More sharing options...
baragan Posted July 8, 2012 Share Posted July 8, 2012 are you trying to open it in a new separate window? if so try adding target="new" in your link Link to comment Share on other sites More sharing options...
amitamberker Posted July 9, 2012 Author Share Posted July 9, 2012 (edited) are you trying to open it in a new separate window? if so try adding target="new" in your link Hi baragan, It's already there in my "Test.html" file. <div><a target="_blank" href="http://www.w3schools.com/" class="imagewarp"><img src="http://www.jurassicp...na_jolie_13.jpg" width="300" class="noborder imagewarp" /></a></div> Edited July 9, 2012 by creative1977 Link to comment Share on other sites More sharing options...
eTianbun Posted July 9, 2012 Share Posted July 9, 2012 (edited) HTML target attr is deprecated. Try using JS instead. E.g: onClick="window.open('http://w3schools...')" or CSS3 target property. E.g: a.newWin{target-new:window;} Edited July 9, 2012 by CodeName Link to comment Share on other sites More sharing options...
eTianbun Posted July 9, 2012 Share Posted July 9, 2012 It seems the CSS3 'target' property is not supported in any of the major browser, so just use JS. Link to comment Share on other sites More sharing options...
amitamberker Posted July 9, 2012 Author Share Posted July 9, 2012 (edited) HTML target attr is deprecated. Try using JS instead. E.g:onClick="window.open('http://w3schools...')" or CSS3 target property. E.g: a.newWin{target-new:window;} Hi CodeName, So, you mean instead of this: <a target="_blank" href="http://www.w3schools.com/" class="imagewarp">Should I make it like this? <a onClick="window.open('http://www.w3schools.com/')" class="imagewarp"> Edited July 9, 2012 by creative1977 Link to comment Share on other sites More sharing options...
eTianbun Posted July 9, 2012 Share Posted July 9, 2012 Yep! Link to comment Share on other sites More sharing options...
eTianbun Posted July 9, 2012 Share Posted July 9, 2012 -OR- → <a href="javascript:window.open('http://w3schools.com')" class="imagewrap">here</a> to open w3schools.com in a new windnw. Link to comment Share on other sites More sharing options...
amitamberker Posted July 9, 2012 Author Share Posted July 9, 2012 Yep! Hi CodeName,Just now Tried it. But it's not working properly Link to comment Share on other sites More sharing options...
amitamberker Posted July 9, 2012 Author Share Posted July 9, 2012 -OR-→ <a href="javascript:window.open('http://w3schools.com')" class="imagewrap">here</a> to open w3schools.com in a new windnw. Hi CodeName,What? Could you please explain it again? Link to comment Share on other sites More sharing options...
eTianbun Posted July 9, 2012 Share Posted July 9, 2012 Hi CodeName,Just now Tried it. But it's not working properly You only said its not working properly, but you did not say what you got, when you tryd it. <a href="#" onClick="">Link</a> Hope you included the href attri, with the value of 'hash'(#). Link to comment Share on other sites More sharing options...
eTianbun Posted July 9, 2012 Share Posted July 9, 2012 (edited) Duplicate deleted! Edited July 9, 2012 by CodeName Link to comment Share on other sites More sharing options...
eTianbun Posted July 9, 2012 Share Posted July 9, 2012 (edited) Hi CodeName,What? Could you please explain it again? Well, nothing much to explain. Lets just say: The 'href' attr, is used to define what you are linking to, then the 'javascript' value inside the href attr, means that you are linking to javascript app, while the colon: , is used to introduce a parameter (value), passed to the JS app. Edited July 9, 2012 by CodeName Link to comment Share on other sites More sharing options...
amitamberker Posted July 9, 2012 Author Share Posted July 9, 2012 You only said its not working properly, but you did not say what you got, when you tryd it.<a href="#" onClick="">Link</a> Hope you included the href attri, with the value of 'hash'(#). Hi CodeName,Oh! Nope. I did not include href="#" earlier. Let me try it yet once again. Please hold on. Link to comment Share on other sites More sharing options...
amitamberker Posted July 9, 2012 Author Share Posted July 9, 2012 (edited) Hi CodeName, Now the whole thing looks like this: <div><a target="_blank" href="#" onClick="window.open('http://www.w3schools.com/')" class="imagewarp"><img src="http://www.jurassicp...na_jolie_13.jpg" width="300" class="noborder imagewarp" /></a></div>But now, that Special Effect does not display and upon clicking the Image (link), HTML file gets blank? Please find the attached "Test-02.html" file for your reference. Remember, this attached file needs to detect "jquery.imageWarp.js" file which I had sent it earlier... Edited July 9, 2012 by creative1977 Link to comment Share on other sites More sharing options...
eTianbun Posted July 9, 2012 Share Posted July 9, 2012 What special effect are you talking about? Note that i never downloaded the file you uploaded, i only used the example you posted, to answer your question. Like i said earlier, the 'target' attr is deprecated, and should be removed. Apart from that, that should work! Link to comment Share on other sites More sharing options...
amitamberker Posted July 9, 2012 Author Share Posted July 9, 2012 (edited) What special effect are you talking about? Note that i never downloaded the file you uploaded, i only used the example you posted, to answer your question. Like i said earlier, the 'target' attr is deprecated, and should be removed. Apart from that, that should work! Hi CodeName, Why you did not download those 2 files? Anyways... I am talking (referring) about following Special Effect: jquery.imageWarp.js /* imageWarp jQuery plugin v1.01* Last updated: June 29th, 2009. This notice must stay intact for usage* Author: Dynamic Drive at http://www.dynamicdrive.com/* Visit http://www.dynamicdrive.com/ for full source code*/jQuery.noConflict()jQuery.imageWarp={dsettings: { warpfactor: 1.5, //default increase factor of enlarged image duration: 1000, //default duration of animation, in millisec imgopacity: [0.5, 1], warpopacity: [0.1, 0.5] },warpshells: [],refreshoffsets:function($target, warpshell){ var $offsets=$target.offset() warpshell.attrs.x=$offsets.left //update x position of original image relative to page warpshell.attrs.y=$offsets.top warpshell.newattrs.x=warpshell.attrs.x-((warpshell.newattrs.w-warpshell.attrs.w)/2) //update x position of final warped image relative to page warpshell.newattrs.y=warpshell.attrs.y-((warpshell.newattrs.h-warpshell.attrs.h)/2)},addEffect:function($, $target, options){ var setting={} //create blank object to store combined settings var setting=jQuery.extend(setting, this.dsettings, options) var effectpos=this.warpshells.length var attrs={w:$target.outerWidth(), h:$target.outerHeight()} var newattrs={w:Math.round(attrs.w*setting.warpfactor), h:Math.round(attrs.h*setting.warpfactor)} var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray'}).appendTo(document.body) $target.add($clone).data('pos', effectpos) //save position of image var $targetlink=$target.parents('a').eq(0) this.warpshells.push({$clone:$clone, attrs:attrs, newattrs:newattrs, $link:($targetlink.length==1)? $targetlink : null}) //remember info about this warp image instance $target.click(function(e){ var $this=$(this).css({opacity:setting.imgopacity[0]}) var imageinfo=jQuery.imageWarp.warpshells[$(this).data('pos')] jQuery.imageWarp.refreshoffsets($this, imageinfo) //refresh offset positions of original and warped images if (imageinfo.$link){ e.preventDefault() } var $clone=imageinfo.$clone $clone.stop().css({left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:setting.warpopacity[0], visibility:'visible'}) .animate({opacity:setting.warpopacity[1], left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration, function(){ //callback function after warping is complete $clone.css({left:0, top:0, visibility:'hidden'}) $this.css({opacity:setting.imgopacity[1]}) if (imageinfo.$link){ window.location=imageinfo.$link.attr('href') } }) //end animate }) //end click}};jQuery.fn.imageWarp=function(options){var $=jQueryreturn this.each(function(){ //return jQuery obj var $imgref=$(this) if (this.tagName!="IMG") return true //skip to next matched element if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0){ //if image has explicit width/height attrs defined jQuery.imageWarp.addEffect($, $imgref, options) } else if (this.complete){ //account for IE not firing image.onload jQuery.imageWarp.addEffect($, $imgref, options) } else{ $(this).bind('load', function(){ jQuery.imageWarp.addEffect($, $imgref, options) }) }})};Okie, removed target="_blank" <div><a href="#" onClick="window.open('http://www.w3schools.com/')" class="imagewarp"><img src="http://www.jurassicp...na_jolie_13.jpg" width="300" class="noborder imagewarp" /></a></div> Edited July 9, 2012 by creative1977 Link to comment Share on other sites More sharing options...
eTianbun Posted July 9, 2012 Share Posted July 9, 2012 I did not download it, coz i use mobile phone@present. The example i gave, should work. Link to comment Share on other sites More sharing options...
amitamberker Posted July 9, 2012 Author Share Posted July 9, 2012 (edited) I did not download it, coz i use mobile phone@present. The example i gave, should work. Hi CodeName, May I request you to Download those 2 Files to understand my Concern and also to see that Special Effect? Please CodeName? The example you gave me is NOT working as per my requirement. See, I am pleading you. Normally I don't plead to anybody. But I am pleading you. Because, I feel maybe you can HELP ME to resolve my issue. Edited July 9, 2012 by creative1977 Link to comment Share on other sites More sharing options...
justsomeguy Posted July 9, 2012 Share Posted July 9, 2012 This is the part that loads the link: if (imageinfo.$link){window.location=imageinfo.$link.attr('href')} You need to replace that with a call to window.open if you want to open it in a new window, or have it auto-detect the target attribute and act accordingly if you want to be able to specify the target attribute. Link to comment Share on other sites More sharing options...
amitamberker Posted July 9, 2012 Author Share Posted July 9, 2012 (edited) This is the part that loads the link: if (imageinfo.$link){window.location=imageinfo.$link.attr('href')} You need to replace that with a call to window.open if you want to open it in a new window, or have it auto-detect the target attribute and act accordingly if you want to be able to specify the target attribute. Hi justsomeguy, Thanks for your reply. So, instead of this: if (imageinfo.$link){ window.location=imageinfo.$link.attr('href') }Should I make it like this? if (imageinfo.$link){ window.open=imageinfo.$link.attr('href="http://www.w3schools.com/"') } Edited July 9, 2012 by creative1977 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now