Develop Reference

How to include javascript place holder in Jinja 2 place holder?

I am trying to embed this feature in my Flask app --> Scattered Polaroid Gallery
So, I have a template (Jinja2), where I am displaying a stack of images. To access the images I am using Flask's url_for() command which uses the symbol ---> {{}}. In the Javascript file which is supposed to dynamically load the images, the same symbol is being used i.e ----> {{}}. I want to know how can I use Javascript's {{}} along with Flask/Jinja 2 {{}}
Below is the Javascript function that replaces every instance of {{img}} with the actual file name.
function addPhotos() {
var template = select('#wrap').innerHTML;
var html = [];
var nav = [];
for (i=0; i<1; i++) {
var _html = template.replace('{{index}}', i)
.replace('img', data[i].img)
.replace('{{caption}}', data[i].caption)
.replace('{{desc}}', data[i].desc);
html.push(_html);
nav.push('<span id="nav_'+i+'" class="i" onclick ="turn(select(\'#photo_'+i+'\'))"> </span>');
}
html.push('<div class="nav">'+nav.join('')+'</div>');
select('#wrap').innerHTML = html.join('');
sort(random([0, data.length]));
}
<div class="mainPage" id="fullpage">
<div class="first section">
<div class="wrap" id="wrap">
<div class="photo photo_front" id="photo_{{index}}" onclick="turn(this)">
<div class="photo-wrap">
<div class="side side-front">
<p class="image">
<!-- <img src="photo/{{img}}"> -->
<img src="{{ url_for('static',filename='photo/{{img}}') }}">
<!-- .replace('{{img}}', data[i].img) -->
</p>
<p class="caption">{{caption}}</p>
</div>
<div class="side side-back">
<p class="desc">{{desc}}</p>
</div>
</div>
</div>
</div>
</div>
Above is the template that uses both Javascript and Jinja2 {{}}.
The following error is shown in the Chrome debug console.
Below is my folder structure for the Flask app -
PS - I have tried using relative path for the image folder instead of url_for() function for ex- <img src="../static/photo/{{img}}"> but it failed as well.
In that case, the following error was shown -
Please help.
EDIT -
After having used " , the following error resulted.

You need to escape the curly brackets by using quotes. Since you need to do this inside an html attribute src you will have to escape these quotes as well since quotes are used already inside the HTML attribute and the way to achieve that is byusing "
Take a look at the img tag src attribute below. If you want to escape the Jinja curly brackets that are not part of an HTML attribute then you can use jinja {% raw %} block (see how I surrounded {{caption}} )
<div class="mainPage" id="fullpage">
<div class="first section">
<div class="wrap" id="wrap">
<div class="photo photo_front" id="photo_{{index}}" onclick="turn(this)">
<div class="photo-wrap">
<div class="side side-front">
<p class="image">
<img src="{{ url_for('static',filename='photo/"{{img}}"') }}">
</p>
<p class="caption">{% raw %}{{'caption'}}{% endraw %}</p>
</div>
<div class="side side-back">
<p class="desc">{% raw %}{{desc}}{% endraw %}</p>
</div>
</div>
</div>
</div>
</div>

How to create an array of divs with content?

I'm trying to create an array of nested divs, in which I only need to change 3 values when writing the divs to the document (html).
My divs look like this:
<div class="item">
<div class="item-h"> <a class="item-anchor" href="1_water_bottle.html">
<div class="item-image"> <img class="item-image-first" src="images/img_1_water_bottle.png" alt="">
<div class="item-meta">
<h2 class="title">Water Bottle 1</h2>
<span class="item-arrow"></span> </div>
</div>
</a> </div>
</div>
I need to create an array of about 50 items, and then use the document.write function to write 4 of those arrays for each page, as a section for "similar stuff".
I searched on stackoverflow, and came up with :: this page :: , which explains how to create an array in javascript, and then found another script that uses the document.write function.
The script uses an array of categories, to populate a form selection. And it does so, but using an array : (var categories = new Array("a1", "a2", "a3", ...) and so on.
for(var hi=0; hi<categories.length; hi++)
document.write("<option value=\""+categories[hi]+"\">"+categories[hi]+"</option>");
Could I use these two scripts to populate a section with 4 items from the array of the divs?
If so, then how could I do it? I know it can be done in php, but don't know if this can be done in javascript.
I tried, and created this array in notepad++, but the code wasn't recognized as a string, per array element...
var array_divs = [
$('<div class="item">
<div class="item-h"> <a class="item-anchor" href="1_water_bottle.html">
<div class="item-image"> <img class="item-image-first" src="images/img_1_water_bottle.png" alt="">
<div class="item-meta">
<h2 class="title">Water Bottle 1</h2>
<span class="item-arrow"></span> </div>
</div>
</a> </div>
</div>') ,
$('<div class="item">
<div class="item-h"> <a class="item-anchor" href="1_water_bottle_2.html">
<div class="item-image"> <img class="item-image-first" src="images/img_1_water_bottle_2.png" alt="">
<div class="item-meta">
<h2 class="title">Water Bottle 2</h2>
<span class="item-arrow"></span> </div>
</div>
</a> </div>
</div>')
]
Trying to populate the section, with selective items from the array, for example:
document.write(array_divs[1],array_divs[2]);
I haven't tried this, but since notepad++ didn't treat my div as a string, I had to search again... but couldn't find any info regarding this.
Thanks for any help.
-

Add new HTML structure to <img/> on post entry, if there is more than one <img/>

Question: What codes should I paste on my blog HEAD?
Using any method (jQuery, javaScript, CSS, HTML, exclude php), how to add new HTML structure to <img/> on post entry, if there is more than one <img/> ?
Blog platfrom: Blogger.com
Example of entry content
If there is only one <img/> the post entry. No additions or changes in the structure of HTML.
But if there is more than one <img/> (example below),
<div class="summary post-body entry-content">
<img src="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg"/>
<img src="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg"/>
<img src="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg"/>
<img src="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg"/>
<!-- end summary post-body entry-content --></div>
How to transform it as HTML below (automaticly),
<div class="summary post-body entry-content">
<!-- start te-container --><div class="te-container">
<div class="te-controls">
<select id="type">
<option value="te-flip1">Flip 1</option>
<option value="te-flip2">Flip 2</option>
<option value="te-flip3">Flip 3</option>
<option value="te-flip4">Flip 4</option>
</select>
<a id="te-next" href="#" class="te-next">next</a>
<div class="te-shadow"></div>
</div>
<!-- start-wrapper --><div id="te-wrapper" class="te-wrapper">
<div class="te-images">
<img src="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg"/>
<img src="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg"/>
<img src="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg"/>
<img src="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg"/>
</div>
<div class="te-cover">
<!-- HOW TO DO AUTOMATICLY, FISRT <img/> located at here --><img src="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg"/>
</div>
<div class="te-transition">
<div class="te-card">
<div class="te-front"></div>
<div class="te-back"></div>
</div>
</div>
<!-- end te-wrapper --></div>
<!-- end te-container --></div>
<!-- end summary post-body entry-content --></div>

So here's a way to solve your problem,
First to be clear as you wanted to add certain markup directly inside your code, I put those inside a variable. Kept the child node in another variable, appended that with existing markup and updated certain elements as asked for.And I would surely ask for a better solution if available.
Here's the script for your scenario,
$(document).ready(function(){
//checks if no. of image is > 1
if($(".summary").children().length > 1){
// gets all elements inside that div
var images = $(".summary").children();
//makes that div empty
$(".summary").empty();
//kept whole markup inside a variable
var newLayout = "<div class='te-container'> <div class='te-controls'><select id='type'><option value='te-flip1'>Flip 1</option><option value='te-flip2'>Flip 2</option><option value='te-flip3'>Flip 3</option><option value='te-flip4'>Flip 4</option></select><a id='te-next' href='#' class='te-next'>next</a><div class='te-shadow'></div></div><div id='te-wrapper' class='te-wrapper'><div class='te-images'></div><div class='te-cover'></div><div class='te-transition'><div class='te-card'><div class='te-front'></div><div class='te-back'></div></div></div></div></div>";
//appends the layout inside .summary div
$(".summary").append(newLayout);
//adds the images inside new div
$(images).clone().appendTo(".te-images");
//gets first child image of .te-images
var firstImagePath = $(".te-images img:first-child").attr("src");
//adds first child image of .te-images inside .te-cover div
$(".te-cover").append("<img src="+ firstImagePath + " />");
}
});
Live Demo

I'm not sure about "automaticly" you meant.
But if u want that div "automaticly" appear img, you can use js. Named the div which contain img. Then wirte this in js :
$(document).ready( function () {
document.getElementsByName('div_name_here').innerHTML = <img src='...'/>
}
Hope that help. Sorry my English is not good.

Next and previous linking in JavaScript image gallery not working

I need to have multiple galleries on the same page (with captions), and have been trying to implement this javascript, but I cannot get the next | previous links to work for either gallery. New to javascript - any suggestions?
Here is the fiddle: http://jsfiddle.net/astHh/11/
HTML:
<div style="text-align: center">
<!-- Place the first image here -->
<img src="http://www.cool-smileys.com/images/out11.jpg" id="mypic" name="mypic" alt="information" border="0" height="150" width="200">
<br>
<!-- Place the text for the first image here --><div id="burns">Caption one</div>
<p>
« Previous |
Next »
</div>
<p>
<div style="text-align: center">
<!-- Place the first image here -->
<img src="http://www.cool-smileys.com/images/out13.jpg" id="mypic2" name="mypic2" alt="information" border="0" height="150" width="200">
<br>
<!-- Place the text for the first image here --> <div id="burns2">Caption two</div>
<p>
« Previous |
Next »
</div>
Javascript:
<script type="text/javascript">
function SimpleSlideShow(o){
this.img=document.getElementById(o.ImageID);
this.txt=document.getElementById(o.TextID);
this.ary=o.Array||[];
this.cnt=0;
}
SimpleSlideShow.prototype.UpDown=function(ud){
this.cnt+=ud;
this.cnt=this.cnt<0?this.ary.length-1:this.cnt==this.ary.length?0:this.cnt;
if (this.ary[this.cnt]){
if (this.img&&this.ary[this.cnt][0]){
this.img.src=this.ary[this.cnt][0];
this.img.alt=this.ary[this.cnt][1];
}
if (this.txt){
this.txt.innerHTML=this.ary[this.cnt][2]||'';
}
}
}
S1=new SimpleSlideShow({
ImageID:'mypic',
TextID:'burns',
Array:[
['http://www.cool-smileys.com/images/out11.jpg,' 'Caption one', 'The beautiful mountains'],
['http://www.cool-smileys.com/images/out10.jpg','Caption two','The crystal clear lake'],
]
});
S2=new SimpleSlideShow({
ImageID:'mypic2',
TextID:'burns2',
Array:[
['http://www.cool-smileys.com/images/out13.jpg','caption one', 'The beautiful mountains'],
['http://www.cool-smileys.com/images/out12.jpg','caption two','The lonesome, barren tree']
]
});
</script>

You have multiple syntax errors in your javascript:
Remove from the script pane:
<script type="text/javascript">
</script>
Within your definition of "S1", you're missing a comma (just before 'Caption one'):
S1=new SimpleSlideShow({
ImageID:'mypic',
TextID:'burns',
Array:[
['http://www.cool-smileys.com/images/out11.jpg,','Caption one', 'The beautiful mountains'],
['http://www.cool-smileys.com/images/out10.jpg','Caption two','The crystal clear lake'],
]
});
Then in the HTML pane, you should update the first set prev/next links to target S1 instead of S2.
Updated fiddle: http://jsfiddle.net/astHh/12/

Append a div to a new div

i am using IPB and i am going to put each category into a new tab the category div is something like this:
<div id='category_100'>
<div id='category_104'>
<div id='category_102'>
<div id='category_101'>
and my tabs content is like this:
<div class="content">
<div id="content-1" class="content-1">
</div>
</div>
and the categories divs is already showing but i want it to be moved to the content-1 div without duplicate so i want it to move from its div to this div with jjava script how?
<script>
document.getElementById('content-1').appendChild(
document.getElementById('category_100')
);
</script>
this worked for me but how can i add more than id to category_100
i want it to be like this in one script code so i would not repeart the scrip code four times:
<div class="content">
<div id="content-1" class="content-1">
<div id='category_100'>
<div id='category_104'>
<div id='category_102'>
<div id='category_101'>
</div>
</div>
using my two lines the suggested things here is not working!

Try this code :
$('div[id^="category_"]').appendTo('#content-1')
Have a look to this fiddle : http://jsfiddle.net/lulu3030/sjEPx/2/

"using my two lines the suggested things here is not working!"
You just get a single element with an ID and trying to append it...
Live Demo
If you want to append multiple elements, there are many ways...
Wrap those elements and then append...
<div id="categories">
<div id='category_100'></div>
<div id='category_104'></div>
<!-- etc. -->
</div>
document.getElementById('content-1').appendChild(document.getElementById('categories'));
or add same class to all elements that you want to append...
<div id='category_100' class="myClass"></div>
<div id='category_104' class="myClass"></div>
[].forEach.call(document.getElementsByClassName("myClass"), function (value, index, array) {
document.getElementById("content-1").appendChild(value);
});
or get elements with query selector that match some pattern...
[].forEach.call(document.querySelectorAll("div[id^='category_']"), function (value, index, array) {
document.getElementById("content-1").appendChild(value);
});
and etc.