Forums / Developer / Take image path name from ezpblish design directory using javascript where we can\t use {literal}.

Take image path name from ezpblish design directory using javascript where we can\t use {literal}.

Next topic

Author	Message
Romeo Antony	Wednesday 23 June 2010 1:47:33 am Hi all, anyone have an idea about how doing this. I have a javascript file in javascript/design of ezpublish in this javascript file, have a code like this var id = this.id; this.getElementsByTagName('IMG')[0].src = 'images/' + this.id + '_over.gif'; I want to get the path of an image file that is in the design dir of ezpublish like /* this.id ._over.gif/ezdesign */
Gaetano Giunta	Wednesday 23 June 2010 3:12:57 am what about calculating that path in a js block in the pagelayout and passing it to your js file via a javascript function invocation? Principal Consultant International Business Member of the Community Project Board
Romeo Antony	Wednesday 23 June 2010 4:21:42 am Gaetano Giunta, thank you for your reply. i was looking to include some javascript based css galleries that fetch content nodes from ezpublish and i would like to implement in ezflow as a block. But what happends that most of the javscript code i get is retriving images from some image directory. but as I am developing a dynamic contents i would not be able to put images each time in design dir of ez image So how do I get the paath folder of images that are content nodes . So I can put the path folder in javascript.
Gaetano Giunta	Wednesday 23 June 2010 5:01:13 am Quite simple: start with $node.data_map.image.content. This will give you an "ezimagealiashandler" object in your template Look up the definition of ezimagealiashandler here: http://ez.no/doc/ez_publish/technical_manual/4_x/reference/objects/ezimagealiashandler you will end up with something like this to get the path to the image file: $node.data_map.image.content.variation.url (where variation is the name of the image variant you want to use, that you will have beforehand customized in an image.ini.append.php file) Principal Consultant International Business Member of the Community Project Board
Romeo Antony	Thursday 24 June 2010 1:45:58 am I have read through those document but i am still confused about how can i change the javascript meaning full to ez this.getElementsByTagName('IMG')[0].src = 'images/' + this.id + '_over.gif'; here javascript object this.id give name of an image appended wiith _over.gif will be a valid image file that is for example ( arrow + _over.gif ) means arrow_over.gif file that is in ez design. how do i put it in ez any idea i think it is like {append(this.id,"_over.gif")\|ezdesign} Isn't it
Gaetano Giunta	Thursday 24 June 2010 2:09:43 am It sounds like you are confusing 2 things: - template code ( ezdesign ) - javascript code ( this.id ) The first is executed ON THE SERVER, the second ON THE BROWSER. And the order of execution is 1st server, 2nd browser. This means that you cannot have javascript code that calls template functions. But you can have javascript code that is generated by template, and that will later execute. The question is what are you exactly trying to do here: retrieve url of an image stored in the design folder or retrieve the url of an image stored in the contents? How do you plan to generate and store the "imagexxx_over.gif" image? Please answer clearly and we might try to come up with a simple answer Principal Consultant International Business Member of the Community Project Board
Romeo Antony	Thursday 24 June 2010 6:08:44 am thank you Gaetano Giunta for u r reply. actually I am struggling with creation of image gallery.I can tell you my idea so you may be able to get me. using ezflow package 1. Created a dynamic block with its source node is image gallery contain images. 2. Now i am looking for to create the template file for this dynamic block in this template want to display 6 thumbnails at the bottom and when click on thumbnail Need to enlarge the thumbnail clicked. 3. I can get the images from dynamic block in the template using <img src={$valid_nodes[ ].object.data_map.image.content[original].full_path} width="" height=" ">(need img element so using full_path ).I can dispaly 6 thummbnails using above template code. 4. next what I am looking is need to apply scrolling to 6 image thumnails that took from dynamic block and to enlarge them when click on each thumnail. 5. For that I found many javascript supported by jqueries from net.you also told me that jquery is supported by ezjcore. Any you give me further idea and example urls, any link , suggestions plz. Thanks in advance Romeo.
Gaetano Giunta	Thursday 24 June 2010 8:00:53 am Hey, you're 95% there! What you are looking for is, if I got it right, the url of 2 different variations of your image. You can generate them using eg. 1. {$valid_nodes[ ].object.data_map.image.content[thumbnail].full_path} and 2. {$valid_nodes[ ].object.data_map.image.content[original].full_path} You should define the "thumbnail" size of images in an image.ini.append.php file. You should then use the first url above to display the image directly in html, and pass the 2nd url to your js function that will load the "full size" version. I am no javascript expert, but surely you will have to alter the js code you posted above: from this.getElementsByTagName('IMG')[0].src = 'images/' + this.id + '_over.gif'; to something like this: function changeimage( newurl ) { this.getElementsByTagName('IMG')[0].src = newurl; ) where newurl is generated in the html by the template call above Principal Consultant International Business Member of the Community Project Board
Romeo Antony	Thursday 24 June 2010 3:45:36 pm Thank you for your clear cut instructions Gaetano. I think I am on the way to the target. As you said I have gone through the ezjscore article. But somethings still confusing me about ezjscore.I am prefering jquery than yui3 library and like to load it from CDN In the ezjscore.ini I put LoadFromCDN=enabled #PreferredLibrary=yui3 (means yui3 not selected) PreferredLibrary=jquery ExternalScripts[jquery]=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js in the template file for image gallery I put {ezscript_require( array( 'ezjsc::jquery' ) )} (or do I need this {ezscript_require( array( 'ezjsc::jquery', 'ezjsc::jqueryio' ) )} ) I do not understand why (jqueryio item, which provides a wrapper for the ezjscore server call router.) this jqueryio needed {ezscript_require( array( 'ezjsc::jquery' ) )} this would work isn't it Then I look to add the jquery supporting javascripts for slide show of images. Any suggestions will be helpfull for me to go ahead