Search Results

Search found 552 results on 23 pages for 'thumbnails'.

Page 19/23 | < Previous Page | 15 16 17 18 19 20 21 22 23  | Next Page >

  • grabbing layer contents in a class

    - by Mike
    I have a custom UIImageView class that creates thumbnails (UIImageView) and each thumbnail has a label. The label is created by another class. The label class creates a UIImageView and a UITextView on top of it. This is the init object class' init method: - (id)initWithFrame:(CGRect)frame { if ([super initWithFrame:frame] == nil) { return nil; } CGRect myFrame = CGRectMake(0, 0, 100, 100); myLabel = [[myLabelClass alloc] initWithFrame: myFrame]; //myLabelClass is a UIImageView based class [myLabel setCenter:CGPointMake(50, 50)]; [self addSubview: myLabel]; return self; } So, I have this MAIN VIEW CONTROLLER | |___ UIImageView WITH LABEL | |____ label background (UIView) |____ UITEXTVIEW (text) Now I want to write the contents of all these 3 components to a quartz context. I need to write using drawInRect, because I need to write the full object to a precise location. I expected object.layer.contents to be the image equivalent to these 3 "layers" flattened, in other words, the object's image, the label background and the label text, as it would if I created these 3 objects in Photoshop and flatten the composition. I also expect object.myLabel.layer.contents to contains the rendered contents of the UITextView over the label background. The problem is that when I use UIImage *myImage = [UIImage imageWithCGImage:objecto.myLabel.layer.contents]; [myImage drawInRect:CGRectMake(0, 0, 100, 100)]; I get nothing. How can I obtain a "flattened" image resultant to the full object (including its subviews)? thanks

    Read the article

  • jQuery click event on image only fires once

    - by stephenreece@
    I created a view of thumbnails. When the user clicks, I want the real image to pop-up in a dialog. That works the first time, but once the jQuery 'click' fires on an thumbnail it never fires again unless I reload the entire page. I've tried rebinding the click events on the dialog close that that does not help. Here is my code: function LoadGalleryView() { $('img.gallery').each(function(){ BindImage($(this)); }); } function BindImage(image) { var src= image.attr('src'); var id= image.attr('id'); var popurl = src.replace("thumbs/", ""); image.hover(function(){ image.attr('style', 'height: 100%; width: 100%;'); }, function(){ image.removeAttr('style'); }); $('#'+id).live('click', function() { PopUpImage(popurl); }); } function CheckImage(img,html) { if ( img.complete ) { $('#galleryProgress').html(''); var imgwidth = img.width+35; var imgheight = img.height+65; $('<div id="viewImage" title="View"></div>').html(html).dialog( { bgiframe: true, autoOpen: true, modal: true, width: imgwidth, height: imgheight, position: 'center', closeOnEscape: true }); } else { $('#galleryProgress').html('<img src="images/ajax-loader.gif" /><br /><br />'); setTimeout(function(){CheckImage(img,html);},10); } } function PopUpImage(url) { var html = '<img src="'+url+'" />'; var img = new Image(); img.src = url; if ( ! img.complete ) { setTimeout(function(){CheckImage(img,html);},10); } } PopUpImage() only executes the first time an image is clicked and I cannot figure out how to rebind.

    Read the article

  • How to scale JPEG images with a non-standard sampling factor in Java?

    - by HRJ
    I am using Java AWT for scaling a JPEG image, to create thumbnails. The code works fine when the image has a normal sampling factor ( 2x2,1x1,1x1 ) However, an image which has this sampling factor ( 1x1, 1x1, 1x1 ) creates problem when scaled. The colors get corrupted though the features are recognizable. The original and the thumbnail: The code I am using is roughly equivalent to: static BufferedImage awtScaleImage(BufferedImage image, int maxSize, int hint) { // We use AWT Image scaling because it has far superior quality // compared to JAI scaling. It also performs better (speed)! System.out.println("AWT Scaling image to: " + maxSize); int w = image.getWidth(); int h = image.getHeight(); float scaleFactor = 1.0f; if (w > h) scaleFactor = ((float) maxSize / (float) w); else scaleFactor = ((float) maxSize / (float) h); w = (int)(w * scaleFactor); h = (int)(h * scaleFactor); // since this code can run both headless and in a graphics context // we will just create a standard rgb image here and take the // performance hit in a non-compatible image format if any Image i = image.getScaledInstance(w, h, hint); image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB); Graphics2D g = image.createGraphics(); g.drawImage(i, null, null); g.dispose(); i.flush(); return image; } (Code courtesy of this page ) Is there a better way to do this? Here's a test image with sampling factor of [ 1x1, 1x1, 1x1 ].

    Read the article

  • Javascript "Match" Function Not Returning Proper Results in Safari or IE (but yes in FF)

    - by Jascha
    Forgive me as this is a time sensitive issue and I will have to switch the site back in a few hours so the link will be bad... but: I am simply comparing two strings looking for a match with this function... I have an array of objects called linkArray and I need to match the .src of each object to a .src I send it (the src of the clicked image). if the the src of the image I clicked matches the src of an object in my array, I set a variable to the link string of that object and return true, letting my page know that the link is available. Now, this works great in FF. But not in any other browser and I can't figure out for the life of me why. I have set up a dialogue box to literally compare, by eye, the two strings that should at the very least throw the message "match". Can anyone see what I am missing here??? here is the link... http://7thart.com/Jewish-History-and-Culture/Jews-and-Baseball-An-American-Love-Story If you click any of the thumbnails on the left, you will activate the function. Again, I apologize as after a few hours I have to switch back to the original site and this link will be invalid. Thanks in advance for your help. (function below)... function matchLink(a){ for(var i=0;i<linkArray.length;i++){ var fixLink = '../' + linkArray[i]['src']; alert(fixLink + '\n = \n' + a); if(fixLink == a){ alert('match'); newLink = linkArray[i]['link']; return true; } } return false; } Note: The "match" will return on two of the images.. the initial image, and the first thumbnail on the left. The second thumbnail SHOULD match, and the third one SHOULD NOT match.

    Read the article

  • Twitter bootstrap modal loads wrong remote data

    - by Victor S
    I'm using Twitter Bootstrap modal featurs and loading data from remote locations. I'm providing the remote url for a set of thumbnails with the hope that once the thumbnail is clicked, the appropriate data (a large version of the image) is displayed. I'm using the html declarative style to define the remote urls and all the features of the modal. What I find is that Twitter bootstrap modal loads first remote url then does not display subsequent remote data, (although a request to the proper url is made in Chrome) but displays first loaded data always. How do I get it to show the proper data? View: #gallery-navigation %ul - @profile.background_images.each do |image| %li = link_to image_tag(image.background_image.url(:thumb)), remote_image_path(image.id), :role => "button", :data => {:toggle => "modal", :target => "#image-modal", :remote => remote_image_path(image.id)}, :id => "image-modal" / Modal #image-modal.modal.hide.fade(role="dialog" aria-hidden="true" data-backdrop="true") .modal-body Controller: def remote_image @image = current_user.profile.background_images.find(params[:image_id]) respond_to do |format| format.html { render :partial => "remote_image", :locals => { :image => @image } } end end

    Read the article

  • AS3 How do I stop sound and video when clicking a menu button to go to another frame?

    - by Jennifer Heidelberg
    Hello, I have a problem with my slideshow script. I have embedding a flash video file into my website with this slideshow called monoslideshow, and everything seems to work perfectly. Trouble is, when I am clicking on another menu button that should jump to another frame, it still keeps playing the video and sound while displaying the new menu data. So I will probably need some code that stops the video instantly, when another menu button is clicked. But how do I write it and where do I put it? Here is my actionscript for the video file to show: var loaderSlide:Loader = new Loader(); var monoslideshow:Object; loaderSlide.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete); addChild(loaderSlide); loaderSlide.load(new URLRequest("monoslideshow.swf")); function onLoadComplete(event:Event):void { monoslideshow = event.target.content; monoslideshow.showLogo = false; monoslideshow.setViewport(new Rectangle(730, 20, 700, 660)); var xml:XML = <album title="TITLE" itemPath="photography/makingoff/" thumbnailPath="thumbnails/"> <contents> <video source="VIDEO.flv" /> </contents> </album> monoslideshow.loadXML(xml); } It would be great to get a solution to this problem, otherwise my website will be kinda messy ;) THANK YOU!!

    Read the article

  • ASP.NET MVC: Can't figure out what VirtualPath is?

    - by Ryan_Pitts
    I have a View that displays a list of images and i am now trying to get it to display the images as thumbnails. Well, i'm pretty sure i got most of it right using VirtualPath's from a custom ActionResult although i can't seem to figure out what it is making the VirtualPath url?? BTW, i'm using XML to store the data from the images instead of SQL. Here is my code: Code from my custom ActionResult: public class ThumbnailResult : ActionResult { public ThumbnailResult(string virtualPath) { this.VirtualPath = virtualPath; } public string VirtualPath { get; set; } public override void ExecuteResult(ControllerContext context) { context.HttpContext.Response.ContentType = "image/bmp"; string fullFileName = context.HttpContext.Server.MapPath("~/Galleries/WhereConfusionMeetsConcrete/" + VirtualPath); using (System.Drawing.Image photoImg = System.Drawing.Image.FromFile(fullFileName)) { using (System.Drawing.Image thumbPhoto = photoImg.GetThumbnailImage(100, 100, null, new System.IntPtr())) { using (System.IO.MemoryStream ms = new System.IO.MemoryStream()) { thumbPhoto.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg); context.HttpContext.Response.BinaryWrite(ms.ToArray()); context.HttpContext.Response.End(); } } } } } Code for my Controller: public ActionResult Thumbnail(string id) { return new ThumbnailResult(id); } Code for my View: <% foreach (var image in ViewData.Model) { %> <a href="../Galleries/TestGallery1/<%= image.Path %>"><img src="../Galleries/TestGallery1/thumbnail/<%= image.Path %>" alt="<%= image.Caption %>" /></a> <br /><br /><%= image.Caption %><br /><br /><br /> <% } %> Any help would be greatly appreciated!! Let me know of any questions you have as well. :) Thanks!

    Read the article

  • Dynamically including multiple files within php for image descriptions

    - by Steve Jones
    Working on implementing image descriptions to a php run gallery and can't seem to figure out how to call each text file for each individual image. //total number of images $total = 77; //max number of thumbnails per page $max = 9; //what image do we want to start from? $startcount = $_GET["start"]; //if there is not a defined starting image, we start with the first if(empty($startcount)) { $startcount = 0; } //start off the loop at 1 $loop = 1; //start the loop while($loop <= $max) { //for the picture labels $num = $startcount + $loop; if($num > $total) { $num = $num - 1; break; } // Add class="last" to every third list item if(is_int($num / 3)) { $last = ' class="last"'; } else { $last = ""; } //the code for the image echo ' <li'.$last.'><a href="images/portfolio/pic-'.$num.'.jpg" rel="milkbox[gall1]"><img src="images/portfolio/thumbs/pic-'.$num.'-thumb.jpg" width="256" height="138" alt="Thumbnail of image '.$num.'" /></a><div>'.$num.'</div></li>'; I see that I can call the text files by number using '.$num.' (I have 77 individual text files with a phrase in each) but how do I tell it to call the files?

    Read the article

  • PHP: imagepng is creating inordinately large files

    - by Rafael
    I'm using a simple thumbnailing script I wrote and it's pretty standard: $imgbuffer = imagecreatetruecolor($thumbwidth, $thumbheight); switch($type) { case 1: $image = imagecreatefromgif($img); break; case 2: $image = imagecreatefromjpeg($img); break; case 3: $image = imagecreatefrompng($img); break; case 6: $image = imagecreatefrombmp($img); break; case 15: $image = imagecreatefromwbmp($img); break; default: return log_error("Tried to create thumbnail from $img: not a valid image"); } imagecopyresampled($imgbuffer, $image, 0, 0, 0, 0, $thumbwidth, $thumbheight, $width, $height); $output = imagepng($imgbuffer, "$album/thumbs/$imgname.png", 9); 9 is the lowest quality setting, yet from a 400 x 600 JPEG image (at 56kB) I'm getting a thumbnail 27 kB in size (140 x 140). Using imagejpeg (quality of 80) instead of imagepng it's about 4kB. How can this be, especially at the lowest quality setting for imagepng? I tried using imagecopy instead of imagecopyresampled, and imagecreate instead of the true color version. Unfortunately the images come out mangled somehow. Is there any way to get PNG thumbnails of a reasonably small file size (about 4 kB at 140 x 140)? Or do I have to use JPEG?

    Read the article

  • how to get large pictures from photo album via facebook graph api

    - by Nav
    I am currently using the following code to retrieve all the photos from a user profile FB.api('/me/albums?fields=id,name', function(response) { //console.log(response.data.length); for (var i = 0; i < response.data.length; i++) { var album = response.data[i]; FB.api('/' + album.id + '/photos', function(photos) { if (photos && photos.data && photos.data.length) { for (var j = 0; j < photos.data.length; j++) { var photo = photos.data[j]; // photo.picture contain the link to picture var image = document.createElement('img'); image.src = photo.picture; document.body.appendChild(image); image.className = "border"; image.onclick = function() { //this.parentNode.removeChild(this); document.getElementById(info.id).src = this.src; document.getElementById(info.id).style.width = "220px"; document.getElementById(info.id).style.height = "126px"; }; } } }); } }); but, the photos that it returns are of poor quality and are basically like thumbnails.How to retrieve larger photos from the albums. Generally for profile picture I use ?type=large which returns a decent profile image but the type=large is not working in the case of photos from photo albums and also is there a way to get the photos in zip format from facebook once I specify the photo url as I want users to be able to download the photos.

    Read the article

  • Handle BACK key event in child view

    - by Mick Byrne
    In my app, users can tap on image thumbnails to see a full size version. When the thumbnail is tapped a bunch of new views are created in code (i.e. no XML), appended at the end of the view hierarchy and some scaling and rotating transitions happen, then the full size, high res version of the image is displayed. Tapping on the full size image reverses the transitions and removes the new views from the view hierarchy. I want users to also be able to press the BACK key to reverse the image transitions. However, I can't seem to catch the KeyEvent. This is what I'm trying at the moment: // Set a click listener on the image to reverse everything frameView.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { zoomOut(); // This works fine } }); // Set the focus onto the frame and then set a key listener to catch the back buttons frameView.setFocusable(true); frameView.setFocusableInTouchMode(true); frameView.requestFocus(); frameView.setOnKeyListener(new OnKeyListener() { @Override public boolean onKey(View v, int keyCode, KeyEvent event) { // The code never even gets here !!! if(keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) { zoomOut(); return true; } return false; } });

    Read the article

  • i integer does not +1 the 1st time

    - by Hwang
    I have a gallery where it will load an image after a previous image is loaded, so every time 'i' will +1 so that it could move to the next image. This code works fine on my other files, but I dunno why it doesn't work for the current file. Normally if I trace 'i' the correct will be 0,1,2,3,4,5,6... etc adding on till the limit, but this files its 'i' repeat the 1st number twice, only it continues to add 0,0,1,2,3,4,5,6...etc The code is completely the same with the other file I'm using, but I don't know why it just doesn't work here. The code does not seems to have any problem. Anyway i can work around this situation? private var i:uint=0; private function loadItem():void { if (i<myXMLList.length()) { loadedPic=myXMLList[i].thumbnails; galleryLoader = new Loader(); galleryLoader.load(new URLRequest(loadedPic)); galleryLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,picLoaded); } else { adjustImage(); } } private function picLoaded(event:Event):void { var bmp=new Bitmap(event.target.content.bitmapData); bmp.smoothing=true; bmpArray.push(bmp); imagesArray[i].addChild(bmp); i++; loadItem(); }

    Read the article

  • Thumbnail image saved with worse quality on Windows Server 2003

    - by Angelo
    Hello, In asp.net 2.0 application I am trying to create thumbnails from uploaded images. However when I test the application on my PC under Windows7 it works fine, but on the real Windows 2003 Server the resized image has worse quality. Where this difference could come from? Different JPEG codec or what, if Yes how it can be updated on Win 2003 Server? Thanks! Here is the code: Resize of the Image: Bitmap newBmp = new Bitmap(imgWidth, imgHeight, PixelFormat.Format24bppRgb); newBmp.SetResolution(inputBmp.HorizontalResolution, inputBmp.VerticalResolution); //Create a graphics object attached to the new bitmap Graphics newBmpGraphics = Graphics.FromImage(newBmp); newBmpGraphics.InterpolationMode = InterpolationMode.HighQualityBicubic; newBmpGraphics.SmoothingMode = SmoothingMode.HighQuality; newBmpGraphics.PixelOffsetMode = PixelOffsetMode.HighQuality; newBmpGraphics.DrawImage(inputBmp, new Rectangle(0, 0, imgWidth, imgHeight), new Rectangle(0, 0, inputBmp.Width, inputBmp.Height), GraphicsUnit.Pixel); Save of the Image: System.IO.Stream imgStream = new System.IO.MemoryStream(); //Get the ImageCodecInfo for the desired target format ImageCodecInfo destCodec = FindCodecForType(ImageMimeTypes.JPEG); if (destCodec == null) { //No codec available for that format throw new ArgumentException("The requested format image/jpeg does not have an available codec installed", "destFormat"); } //Create an EncoderParameters collection to contain the //parameters that control the dest format's encoder EncoderParameters destEncParams = new EncoderParameters(1); EncoderParameter qualityParam = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality,(long)quality); destEncParams.Param[0] = qualityParam; //Save w/ the selected codec and encoder parameters inputBmp.Save(imgStream, destCodec, destEncParams); Bitmap destBitmap = new Bitmap(imgStream);

    Read the article

  • addField type image and thumbnail path

    - by Christiaan
    Hello, I have a Magento webshop and just created a custom module with the extension (Modulecreator). This module comes with a standard admin interface that can handle file uploads. I found out that if you want to show thumbnails you can use the 'image' field type (addField('myfield', 'image')) instead of the 'file' type field. But now i've got a problem. When I upload files, I save them in a subdirectory called 'slides' in the 'media' directory. But when I edit the item, the image path for the thumbnail next to the uploadfield is set to the 'media' folder. Not my folder as I set it to 'media/slides/'. I use the following code: $fieldset->addField('filename', 'image', array( 'label' => Mage::helper('slideshow')->__('File'), 'required' => true, 'name' => 'filename', )); I tried to set a 'path' key in the array, but this doesn't get picked up by Magento. Hate the lack of support for good and easy to use documentation by Magento... Maybe you can help me out to find a solution?

    Read the article

  • How to call a method from another class that's been instantiated within the current class

    - by Pavan
    my screen has a few views like such __________________ | _____ | | | | | //viewX is a video screen | | | | | viewX | vY | | //viewY is a custom uiview i created. | |____| | //it contains a method which i would like to call that toggles |_________________| //the hidden property of this view. and when it hides, a little | | //button is replaced no the top right corner on top of viewX | viewZ | //the video layer | | |_________________| //viewZ is a view containing many square views - thumbnails. my question is, i dont know how to register for touch events so that it recognises any touch event on no matter which view the user touches the screen.. atm im handling the touch events for each view inside it. so all works well... however what im trying to do is that when the user taps anywhere else on the screen but on viewY, viewY should dissapear by calling that method in the viewY class. this viewY class is instantiated and has no xib file attached to it. the uiview is created progammatically in the viewY class. this whole class for viewY behviour is instantiated in viewX - the video view. my boss says add delegates.. although i have now clue how to do that... any help? is there anyway i can just make it really simple and be able to say REMOVE VIEW no matter which class im calling from? Also ive seen other people achieve this by using these funky arrows - ... <- etc.. although im not sure if thats what i need or how to implement such a thing. ah i think ive made my question quite complicated but i really mean it to be a simple one, and know it can be done in an easy way!

    Read the article

  • Passing Extras and screen rotation

    - by Luis A. Florit
    This kind of questions appear periodically. Sorry if this has been covered before, but I'm a newbie and couldn't find the appropriate answer. It deals with the correct implementation of communication between classes and activities. I made a gallery app. It has 3 main activities: the Main one, to search for filenames using a pattern; a Thumb one, that shows all the images that matched the pattern as thumbnails in a gridview, and a Photo activity, that opens a full sized image when you click a thumb in Thumbs. I pass to the Photo activity via an Intent the filenames (an array), and the position (an int) of the clicked thumb in the gridview. This third Photo activity has only one view on it: a TouchImageView, that I adapted for previous/next switching and zooming according to where you shortclick on the image (left, right or middle). Moreover, I added a longclick listener to Photo to show EXIF info. The thing is working, but I am not happy with the implementation... Some things are not right. One of the problems I am experiencing is that, if I click on the right of the image to see the next in the Photo activity, it switches fine (position++), but when rotating the device the original one at position appears. What is happening is that Photo is destroyed when rotating the image, and for some reason it restarts again, without obeying super.onCreate(savedInstanceState), loading again the Extras (the position only changed in Photo, not on the parent activities). I tried with startActivityForResult instead of startActivity, but failed... Of course I can do something contrived to save the position data, but there should be something "conceptual" that I am not understanding about how activities work, and I want to do this right. Can someone please explain me what I am doing wrong, which is the best method to implement what I want, and why? Thanks a lot!!!

    Read the article

  • Lite-Javascript Gallery - Can I position the img absolutely in relationship to the lis?

    - by blackessej
    I have a lite-javascript run image gallery. The javascript grabs each element in the list and places it as a background in the parent element. Then the CSS styles the thumbnails as small blocks with a defined height/width. A click-event for each object toggles it’s child’s element’s visibility and adds an “active” class name to the . Using CSS, I'm trying to place the absolutely to make it appear at the same position for each thumb, but it's moving in relation to the thumbs. Here's the CSS: #jgal li { background-position:50% 50%; background-repeat:no-repeat; border:solid #999 4px; cursor:pointer; display:block; float:left; height:60px; width:60px; margin-bottom:14px; margin-right:14px; opacity:0.5; } #jgal li img { position:absolute; top:0px; left:210px; display:none; } And the site: http://www.erisdesigns.net Thanks in advance for any help!

    Read the article

  • how to run href="#var=something" before onclick function fires in javascript?

    - by korben
    i'm using the below javascript to change an image on an aspx in asp.net c# <script language="JavaScript" type="text/javascript"> var updateImageWhenHashChanges = function() { theImage = document.getElementById("ctl00_ContentPlaceHolder1_Image1a"); if(window.location.hash == "#size=2") { theImage.src = "<%# Eval("realfilename", "/files/l{0}") %>"; } else if(window.location.hash == "#size=3") { theImage.src = "<%# Eval("realfilename", "/files/{0}") %>"; } else if(window.location.hash == "#size=1") { theImage.src = "<%# Eval("fullthumbname", "/thumbnails/{0}") %>"; } else { } } </script> here's how i call it with a link <a href="#size=3" onclick="updateImageWhenHashChanges();">test</a> the problem is that it only does what i'm expecting on the SECOND click of the link, because it seems onclick fires before the href, so the first time i'm just placing the var and the 2nd time i'm actually getting what i want. does anyone know how i can fix this? i'm trying to get the image to change on each click

    Read the article

  • Java scripts conflict on my home page

    - by naveen
    <script type="text/javascript" src="jquery-1.js"></script> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript" src="slideshow.js"></script> <script type="text/javascript"> //<![CDATA[ window.addEvent('domready', function(){ var data = { '1.jpg': { caption: 'Volcano Asención in Ometepe, Nicaragua.' }, '2.jpg': { caption: 'A Ceibu tree.' }, '3.jpg': { caption: 'The view from Volcano Maderas.' }, '4.jpg': { caption: 'Beer and ice cream.' } }; var myShow = new Slideshow('show', data, {controller: true, height: 400, hu: 'images/', thumbnails: true, width: 500}); }); //]]> </script> <script type="text/javascript"> $(document).ready(function() { //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked $("#firstpane p.menu_head").click(function() { $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); $(this).siblings().css({backgroundImage:"url(left.png)"}); }); //slides the element with class "menu_body" when mouse is over the paragraph $("#secondpane p.menu_head").mouseover(function() { $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow"); $(this).siblings().css({backgroundImage:"url(left.png)"}); }); }); </script> <!--[if lt IE 7]> <script type="text/javascript" src="unitpngfix.js"></script> <![endif]-->

    Read the article

  • Jquery - removing an image before the client browser attempts to download it

    - by ajbrun
    Hi there, I wonder if anyone could help me with a problem I've been having. I have a number of large images available, but due to space limitations, I can't create multiple copies of these at various sizes. I have used PHP GD functions to resize the images to the sizes I need and output them to the browser. This works, but obviously takes some processing time, which therefore impacts pages load times. I'm fine with this, but I only want to show the image once it's fully loaded, and have a loading gif in its place until that time. I'm using jquery to do this. The problem I'm having is making the page functional whether the client has javascript enabled or not. If JS is not enabled, I want standard img tags to be outputted, otherwise the images are removed and replaced with a loading gif until they have been fully loaded. The link below shows a simple non-javascript unfriendly example of a what I want to do (try turning JS off): http://jqueryfordesigners.com/demo/image-load-demo.php I've been testing the basics using the code below. The attr() function will be replaced with something like remove(). This is just a test to make something happen to the image before the browser tries to load it. $(document).ready(function() { $( "#Thumbnails .thumbnail img" ).attr('src', '#'); }); In IE, this works correctly - the image source is replaced with "#" BEFORE the client browser gets a chance to start downloading the image. In firefox however, it downloads the image, and THEN changes the source. It seems to me that firefox is loading the jquery onready event later than it should. As far as I know, this should be executed before the standard onload event and before anything has started loading. If it helps, I'm testing it with a good number of images on screen (81). Am I doing something wrong?

    Read the article

  • Bind two images together to be dragged

    - by Ryan Beaulieu
    I'm looking for some help with a script to drag two images together at once. I currently have a script that allows me to drag thumbnail images into a collection bin to be saved later. However, some of my thumbnails have an image positioned over the top of them to represent these thumbnail images as "unknown" plants. I was wondering if someone could point me in the right direction as to how I would go about binding these two images together to be dragged. Here is my code: $(document).ready(function() { var limit = 16; var counter = 0; $("#mainBin1, #mainBin2, #mainBin3, #mainBin4, #mainBin5, #bin_One_Hd, #bin_Two_Hd, #bin_Three_Hd, #bin_Four_Hd, #bin_Five_Hd").droppable({ accept: ".selector, .plant_Unknown", drop: function(event, ui) { counter++; if (counter == limit) { $(this).droppable("disable"); } $(this).append($(ui.draggable).clone()); $("#cbOptions").show(); $(".item").draggable({ containment: "parent", grid: [72,72], }); } }); $(".selector").draggable({ helper: "clone", revert: "invalid", revertDuration: 700, opacity: 0.75, }); $(".plant_Unknown").draggable({ helper: "clone", revert: "invalid", revertDuration: 700, opacity: 0.75, }); }); Any help would be greatly appreciated. Thanks. EDIT: Website

    Read the article

  • JQuery, AJAX: Trying AJAX for the first time but cant get this to work...

    - by fwaokda
    Trying to get the code below to work but the success doesn't execute - the error does. How can I get more detailed information on what is exactly going wrong? I'll include the code for next.php in a pastebin link also. Thanks. [next.php: http://pastebin.com/Gnu2AfU8 ] $("a#next").click(function() { $.ajax({ type : 'POST', url : 'next.php', dataType : 'json', data : { nextID : $("a#next").attr("rel") }, success : function ( data ) { $("img#spotlight").attr("src",data.spotlightimage); $("div#showcase h1").text(data.title); $("div#showcase h2").text(data.subtitle); for(var i=0; i < data.size; i++) { $("ul#features").append("<li>").text(data.feature+i).append("</li>"); } $("div#showcase p").text(data.description); for(i=1; j < data.picsize; i++) { $("div.thumbnails ul").append("<li>").text(data.image+i).append("</li>"); } $("a#next").attr("rel", $a("a#next").attr("rel") + 1); }, error : function ( XMLHttpRequest, textStatus, errorThrown) { $("div#showcase h1").text("An error has occured."); } }); });

    Read the article

  • How to add an object to a html string?

    - by Philippe Maes
    I'm trying to load several images by a drop action and than resizing them and adding them as a thumbnail. The resize part is very important because the images can be very large and I want to make the thumbnails small of size. Here is my code: loadingGif(drop); for (var i=0;i<files.length;i++) { var file = files[i]; var reader = new FileReader(); reader.onload = function(e) { var src = e.target.result; var img = document.createElement('img'); img.src = src; var scale = 100/img.height; img.height = 100; img.width = scale*img.width; output.push('<div id="imagecontainer"><div id="image">'+img+'</div><div id="delimage"><img src="img/del.jpg"" /></div></div>'); if(output.length == files.length) { drop.removeChild(drop.lastChild); drop.innerHTML += output.join(''); output.length = 0; } } reader.readAsDataURL(file); } As you can probably tell I insert a loading gif image in my dropzone until all files are loaded (output.length == files.length). When a file is loaded I add html to an array which I will print if the load is complete. The problem is I can't seem to add the img object (I need this object to resize the image) to the html string, which seems obvious as the img is an object... So my question to you guys is: how do I do this? :)

    Read the article

  • JQUERY - how to get updated value after ajax removes data from within it?

    - by Brian
    I have a an element with thumbnails. I allow users to sort their display order (which fires off an update to the DB via ajax). I also allow them to delete images (which, after deletion, fires off a request to update the display order for all remaining images). My problem is with binding or live I think, but I don't know where to apply it. The array fired off upon delete contains ALL the ids for the images that were there on page load. The issue is that after they delete an image the array STILL contains the original ids (including the one that was deleted) so it is obviously not refreshing the value of the element after ajax has removed things from inside it. I need to tell it to go get the refreshed contents... From what I have been reading, this is normal but I don't understand how to tie it into my routine. I need to trigger the mass re-ordering after any deletion. Any ideas gurus? $('a.delimg').click(function(){ var parent = $(this).parent().parent(); var id = $(this).attr('id'); $.ajax({ type: "POST", url: "../updateImages.php", data: "action=delete&id=" + id, beforeSend: function() { parent.animate({'backgroundColor':'#fb6c6c'},300); $.jnotify("<strong>Deleting This Image & Updating The Image Order</strong>", 5000); }, success: function(data) { parent.slideUp(300,function() { parent.remove(); $("#images ul").sortable(function() { //NEEDS TO GET THE UPDATED CONTENT var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; $.post("../updateImages.php", order, function(theResponse){ $.jnotify("<strong>" + theResponse + "</strong>", 2000); }); }); }); } }); return false; }); Thanks for any help you can be.

    Read the article

  • Monitor System Resources from the Windows 7 Taskbar

    - by Asian Angel
    The problem with most system monitoring apps is that they get covered up with all of your open windows, but you can solve that problem by adding monitoring apps to the Taskbar. Setting Up & Using SuperbarMonitor All of the individual monitors and the .dll files necessary to run them come in a single zip file for your convenience. Simply unzip the contents, add them to an appropriate “Program Files Folder”, and create shortcuts for the monitors that you would like to use on your system. For our example we created shortcuts for all five monitors and set the shortcuts up in their own “Start Menu Folder”. You can see what the five monitors (Battery, CPU, Disk, Memory, & Volume) look like when running…they are visual in appearance without text to clutter up the looks. The monitors use colors (red, green, & yellow) to indicate the amount of resources being used for a particular category. Note: Our system is desktop-based but the “Battery Monitor” was shown for the purposes of demonstration…thus the red color seen here. Hovering the mouse over the “Battery, CPU, Disk, & Memory Monitors” on our system displayed a small blank thumbnail. Note: The “Battery Monitor” may or may not display more when used on your laptop. Going one step further and hovering the mouse over the thumbnails displayed a small blank window. There really is nothing that you will need to worry with outside of watching the color for each individual monitor. Nice and simple! The one monitor with extra features on the thumbnail was the “Volume Monitor”. You can turn the volume down, up, on, or off from here…definitely useful if you have been wanting to hide the “Volume Icon” in the “System Tray”. You can also pin the monitors to your “Taskbar” if desired. Keep in mind that if you do close any of the monitors they will “temporarily” disappear from the “Taskbar” until the next time they are started. Note: If you want the monitors to start with your system each time you will need to add the appropriate shortcuts to the “Startup Sub-menu” in your “Start Menu”. Conclusion If you have been wanting a nice visual way to monitor your system’s resources then SuperbarMonitor is definitely worth trying out. Links Download SuperbarMonitor Similar Articles Productive Geek Tips Monitor CPU, Memory, and Disk IO In Windows 7 with Taskbar MetersUse Windows Vista Reliability Monitor to Troubleshoot CrashesTaskbar Eliminator Does What the Name Implies: Hides Your Windows TaskbarBring Misplaced Off-Screen Windows Back to Your Desktop (Keyboard Trick)How To Fix System Tray Tooltips Not Displaying in Windows XP TouchFreeze Alternative in AutoHotkey The Icy Undertow Desktop Windows Home Server – Backup to LAN The Clear & Clean Desktop Use This Bookmarklet to Easily Get Albums Use AutoHotkey to Assign a Hotkey to a Specific Window Latest Software Reviews Tinyhacker Random Tips DVDFab 6 Revo Uninstaller Pro Registry Mechanic 9 for Windows PC Tools Internet Security Suite 2010 Follow Finder Finds You Twitter Users To Follow Combine MP3 Files Easily QuicklyCode Provides Cheatsheets & Other Programming Stuff Download Free MP3s from Amazon Awe inspiring, inter-galactic theme (Win 7) Case Study – How to Optimize Popular Wordpress Sites

    Read the article

< Previous Page | 15 16 17 18 19 20 21 22 23  | Next Page >