CMS Made Simple Forums

Posted: **Tue May 25, 2010 4:42 pm**

Hallo, ik gebruik een script van internet om een image preview te laten zien bij een mouseover. Nu ontstaat er het probleem dat wanneer er een plaatje wordt bekeken aan de rechterkant van de pagina, dat de vergroting buiten beeld valt.

Nu wil ik het script aanpassen zodat de preview aan de linkerkant van de cursor verschijnt wanneer het plaatje zich rechts van de pagina bevindt, en rechts langs de cursor wanneer het plaatje zich links bevindt.

Er zal dan iets toegevoegd moeten worden in de trend van:

if [scherm breedte in px] - [x positie van muis cursor in px] larger then [scherm breedte in px]/2 --> [preview scherm aan linkerkant van cursor] else [preview scherm aan rechterkant van cursor]

bovenstaande pseudo-code moet in onderstaand script gepast worden.. Iemand die me daarbij kan helpen of een soortgelijk script aan kan leveren? Het moet gaan lijken op istockphoto

Code: Select all

/*
 * Image preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */
 
this.imagePreview = function(){	
	/* CONFIG */
		
		xOffset = 200;
		yOffset = 30;
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		
	/* END CONFIG */
	$("a.preview").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");								 
		$("#preview")
			.css("top",(e.pageY + xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");						
    },
	function(){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(e){
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};


// starting the script on page load
$(document).ready(function(){
	imagePreview();
});

Posted: **Wed Jun 02, 2010 5:23 am**

Qua code heb ik geen concrete oplossing voor je, wel een suggestie, nl. om bijv. bij Slimbox te kijken hoe het daar is opgelost; daar worden alle foto's in het midden van het scherm geplaatst.

Gregor

Posted: **Wed Jun 02, 2010 9:34 am**

Gregor wrote: Qua code heb ik geen concrete oplossing voor je, wel een suggestie, nl. om bijv. bij Slimbox te kijken hoe het daar is opgelost; daar worden alle foto's in het midden van het scherm geplaatst.

Gregor

dat klopt, heb ik ook naar zitten kijken.. het enigste probleem was dat ik dat soort lightbox scriptjes niet op 'on.hover' kon laten werken zegmaar... alleen met 'on.click'

Posted: **Wed Jun 02, 2010 12:39 pm**

heb het script van sxc.hu gejat, en deze geïmplementeerd. Works like a charm!

http://www.sxc.hu/inc/tooltip.js

aanroepen door middel van:

enigste probleem is nu nog; die 200 en 300 zijn de hoogte en breedte van het plaatje..dit werkt goed voor een liggend-plaatje zegmaar.. maar stel het is een portret foto (staand) dan kloppen die verhoudingen niet meer. Die 200/300 moet ik dus eigenlijk dynamisch inladen aan de hand van de dimensies van het plaatje.

het plaatje wordt ingevoegd via een custom 'velddefinitie' in de nieuwsmodule. Deze wordt vervolgens als volgt aangeroepen:

Code: Select all

 {if $field->name == 'Project_foto_1' && $field->value!=''}
                            {assign var='loc' value=$entry->file_location}
                            {assign var='theFile' value=$field->value}
                            {capture name=some_content assign="imgName"}{dynresize path=$loc|cat:'/'|cat:$theFile width='199' height='199' alt=$entry->title|escape:htmlall}{/capture}
                            {assign var=title value=$entry->title|escape:htmlall}
<a onmouseout="hidetrail();" onmouseover="showtrail(400,300,'{$loc|cat:'/'|cat:$theFile}');" href="#">{$imgName|replace:"/>":" alt=\"$title\" align=\"left\"  border=\"0\"  class=\"NieuwsImageFull\"/>"}</a>
              {/if}

Iemand een idee hoe ik de dimensies van de foto dynamisch inlaad? {$entry->file_width} werkt niet, al was dat ook maar een pure gok

CMS Made Simple Forums

aanpassen image preview script

aanpassen image preview script

Re: aanpassen image preview script

Re: aanpassen image preview script

Re: aanpassen image preview script