Develop Reference

How to remove Blooger post snippet code from below template?

Here is the demo link of the Blogger theme I will be using : https://shareme-templatesyard.blogspot.com/ and here are I posted full Template code https://pastebin.com/n13RQGnC
I don't have my own blog yet. I have tried to remove <data:post.snippet/> in order to show full posts instead of snippets, but I couldn't find it for this specific template. I'm not a coder, so any help will be very much appreciated.
Thank you.

Do you mean that you want to show full posts on the homepage?
If yes, do the following:
Go to Theme > Edit HTML
click "Jump to Widget"
select "Blog1"
locate & find this line <b:includable id='postBodySnippet' var='post'> .. </b:includable>
Replace the entire line to below...
<b:includable id='postBodySnippet' var='post'>
<div class='container post-body entry-content' expr:id='"post-snippet-" + data:post.id'>
<data:post.body/> </div> </b:includable>
click Save Theme
Refresh your blog page to see the changes.
In addition you may want to remove the "Read More" link at Contempo homepage or index pages, here's how:-
Go to Theme > Customize
select Advanced
find & select
Add CSS add below:-
.jump-link {
display:none;}

How to send a image to another page using phonegap

I am very new to using HTML, CSS and JS etc in Phone gap.
I have no idea how to approach this problem. i have done some research but it doesn't make sense to me.
I have a page of small symbols
<img src="img/car.png" alt="car">
<img src="img/lorry.png" alt="lorry">
<img src="img/house.png" alt="house">
When the user clicks one of these symbol I want the image to be sent to the large symbol page where it will show the symbol enlarged.
If the user goes back and chooses another symbol i want it to overwrite this image.
how can i code this into my application?
I initially thought i could create a enlarged symbol page for each symbol but this would mean there would be over 300 pages. Therefore why im trying to figure out how to use one enlarged symbol page which all the symbols can be enlarged and seen on.

You can add a query string parameter to your links
<img src="img/car.png" alt="car">
<img src="img/lorry.png" alt="lorry">
<img src="img/house.png" alt="house">
Then on largeSymbol.html you can use the URI.js library to read the query string and act accordingly, maybe something like this
<img id='big-image' src='' />
<script src='https://code.jquery.com/jquery-2.2.0.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.17.0/URI.js'></script>
<script>
var querySrc = URI( window.location.href ).search( true ).src;
$("#big-image").attr( "src" , querySrc );
</script>

CSS/Javascript Lightbox

First I'll start with this: I am in no way shape or form a developer, coder etc etc. I'm just a graphic designer helping a friend with her website.
As of right now, I'm having issues linking up thumbnails to the full images on my lightbox call out - you can view the site at www.chrissybulakites.com
I noticed
With VOID:(0) being in every single one ... my thought process was that if I correspond 0 thumb with 0 full then 1 thumb with 1 full then 2 thumb wwith 2 full etc etc it would work .. it didn't.
Can somebody explain to me if I'm on the right path or what I can do to make this work.
Thanks
Rob

Have have two basic elements per image; the thumb and the full image. The thumb is using JavaScript to show and hide a div (kind of like a frame) to hold the full image.
The HTML on the page repeats itself a lot, you can probably solve your problem whilst removing some of the repetition. I'd keep all of your thumbs but on each one, add in a reference to the full image the thumb represents. As well as reducing repetition, it'll make it easier to update the page in the future as changing a thumb and main image is done in one place rather than two.
In the below I've added another part to the "onclick" to say update the src of 'frame' to be the full version of the thumb.
<img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" />
Then delete all of the large images except one, updating it so that the img tag has an ID of 'frame'
<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA Close</div>
<div id="fade" class="black_overlay"></div>
This will mean that as each thumb is clicked, it will do the light and fad bits it did before but it will also update the image being displayed.
Doing this for two images as a proof of concept I get this which works as expected:
<img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" />
<img src="http://chrissybulakites.com/thumbnails/actor_thumbnail.png" />
<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA Close</div>
<div id="fade" class="black_overlay"></div>

you need to give each full image div its own unique id like: id="image23". Then modify the onclick to refrence the corresponding id: onclick="document.getElementById('image23')...

The meaning of the function void() in JavaScript is "do nothing". This prevents it to load a new new page (or to open the thumbnail image).
onclick = "document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block' "
Says that when user clicks that item it will capture the element light and change the display to block it will also capture the element fade and change the display to block. The thing is all your images are wrapped in an element called "light" so the browser is opting to show the first one (instead of throwing an error).
There is plenty of fuzzy logic here.
Starting with the fact that you are loading all images (the high definition ones).
If you want my two cents (and you only want to get the results, as opposed to learn how JavaScript works) I would go with something like prettyPhoto that does it out of the box, in an easy and straightforward way and is well documented.
How to add prettyPhoto to your page?
Download the code and include both the Javascript and the CSS file's on your header.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
Then put this code on your page
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
The docs say to put it on the bottom of the page but you (should) also put it on the header.
And then put the thumbnails with links to the actual images. PrettyPhoto will take care of everything else. Do note the rel="prettyPhoto[my_gal]"
<a href="img/full/1.jpg" rel="prettyPhoto[my_gal]" title="Caption 1">
<img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" />
</a>
You can customize it further and should really read the manual here.

jQuery image gallery (need how to make the big image clickable)

im using the "CREATE IMAGE GALLERY IN 4 LINES OF JQUERY" (link below), which works just fine.
But i like to make the large images clickable (not just the thumbs), so that when i click on which ever image that is showing as the large image, another bigger version of the image opens in a new window.
http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/
Any ideas is greatly appreciated. Thank you.

You can wrap the large image in an anchor element:
<div id="panel">
<a href="images/image_01_largest.jpg" target="_blank">
<img id="largeImage" src="images/image_01_large.jpg" />
</a>
<div id="description">First image description</div>
</div>
This follows the convention that one image comes in three sizes: *_thumb.jpg, *_large.jpg, and *_largest.jpg. All you need to do now is change anchor's href attribute when changing #largeImage's src.
$('#thumbs img').click(function(){
$('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#largeImage').parent().attr('href', $(this).attr('src').replace('thumb', 'largest'));
$('#description').html($(this).attr('alt'));
});

Hi you may try with the Pretty photo plugin for displaying the gallery in the light box. Demo for Preety Photo.This may help you

how to make a twitter-bootsrap popover on an HTML image map

I am making a website, in the website i haven an image with an image map.
I am stuck on this point, the popover is working perfectly in an tag but not in the tag. does anyone know how to get the twitter-bootstrap popover work on an image map?
I think it has someting to do with this line: $('#example').tooltip(options) tooltip exaple
the twitter-bootstrap pover
Thanks (i hope my English is understandable)

Turn your image map into something like (fill the ...px with actual dimensions):
<div id="#map" style="position:relative;width:...px;height:...px;background-image:...">
<a id="map-link-1" href="/path/url/for/target/or/#"
style="position:absolute;top:...px;left:...px;width:...px;height:...px"> </a>
<a id="map-link-2" href="/path/url/for/target/or/#"
style="position:absolute;top:...px;left:...px;width:...px;height:...px"> </a>
...
</div>
Then deal with the anchors like you are used to.