The theme I use lets photoset images pop up to the grey gallery slide show.
If I post only a single photo nothing happens, even when I insert a clickthrough URL.
I'd like to have the grey slide show gallery for all images.
On the dashboard it works, but not in the theme.
I think there's some code missing, but I don't know it.
Could somebody have a look on it, please?
I use this theme http://mindspalace.tumblr.com
There's no official way for doing this, but you could 'piggyback' tumblr's Lightbox function Tumblr.Lightbox.init() since it's already loaded on your blog for photosets.
It accepts an array containing the urls of all the photoset images, but in this case there is only one image so you can just pass that.
A quick edit of the javascript tumblr appends to every photoset, to allow single photos:
<script class="inline_embed" type="text/javascript">
var domain = document.domain,
photo_{PostID} = [{
"width": "{PhotoWidth-HighRes}",
"height": "{PhotoHeight-HighRes}",
"low_res": "{PhotoURL-250}",
"high_res": "{PhotoURL-HighRes}"
}];
function event_is_alt_key(e) {
return ((!e && window.event && (window.event.metaKey || window.event.altKey)) || (e && (e.metaKey || e.altKey)));
};
document.getElementById('photo_{PostID}').onclick = function (e) {
if (event_is_alt_key(e)) return true;
window.parent.Tumblr.Lightbox.init(photo_{PostID});
return false;
}
</script>
In the Edit HTML screen of your theme's Customize, search for the {Block:Photo} and inside, look for the <img or {PhotoURL tag. You'll need to add an id="{PostID} to the <img /> so it will resemble something like this:
<img id="photo_{PostID}" src="{PhotoURL-500}" />
Once you've done that, copy the modified javascript code block at the top and paste it after the image code, and save. When you click an image post, it should bring up the Lightbox that tumblr uses for photosets and show the vignette background.
Creating a custom HTML theme
Related
I'm trying to make all picture posts on my homepage not clickable, so they can't link to the permalinks. (I just want them to stay as miniatures with the hover cycle effect already provided by the theme)
I've tried removing {LinkOpenTag} and {LinkCloseTag} from:
{block:Photo}
<div class="wide-sizer">
<div class="image">
{LinkOpenTag}
<img src="{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}{block:IndexPage}{PhotoURL-500}{/block:IndexPage}" alt="{PhotoAlt}"
data-high-res="{PhotoURL-HighRes}"
data-width="{PhotoWidth-HighRes}"
data-height="{PhotoHeight-HighRes}"
/>
{LinkCloseTag}
</div>
But photos and photosets are still clickable.
This is my page: http://woodstudiofr.tumblr.com
I'm using the "Spectator Theme".
UPDATE: ok so i tried removing as data-permalink={Permalink}as lharby suggested, but now all the links redirect to /undefined.
Any ideas?
thanks again for your time !
As mentioned in my comment, the data-permalink attribute has been removed, but there is still some custom javascript which is casing the url to be returned undefined.
Go to the bottom of your template, before the closing <body> tag and add this code:
<script type="text/javascript">
$(document).ready(function(){
$('.post').unbind('click').click(function(){});
});
</script>
(Basically instead of binding the post to a click function which is in the custom javascript we are now attempting to unbind it on click).
I tested it in the browser and it looks to be working (although a couple of other methods I thought would work didn't).
EDIT
In order to change the cursor on the post element. Remove the clickable class from the .post div from the template (if you can, if it is hard coded in).
Alternatively inside the style tags at the bottom, add the following css:
.post-grid .post.photo.clickable a,
.post.clickable {
cursor: default;
}
I don't know if what I want it's possible or not, but what I'm looking for is a way of displaying content differently, using tags.
If I have a post with a tag #movies, I would want to display an image of a camera. If the tag is #music, I would like to display an image of a radio.
Try this immediately under {block:Posts}, or before {/block:Posts} depending on where you want the signifier to be.
{block:HasTags}
{block:Tags}
<script type='text/javascript'>
var {Tag} = '{Tag}'; if ({Tag} == 'movies')
{document.write('Movies blah blah');}
</script>
{/block:Tags}
{/block:HasTags}
This should display the text "Movies blah blah" wherever you put the code on posts you tag with the tag "movies" (case sensitive).
Simply repeat for other tags.
I have a tumblr blog. I want to put a Google Translate Tool & Button on my tumblr blog. How can I do? Unfortunately, I cant find it in tumblr help pages.
Go here: https://translate.google.com/manager/add
Follow all of the instructions and you'll get two pieces of code, one that looks like this:
<meta name="google-translate-customization" content="272b1f36bdc17cf1-0221013045ec1abb-gfd965ee1275b4499-14"></meta>
You'll want to place the <meta> code before the closing </head> tag, this will be at the top of your theme.
The other piece of code looks like this:
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
For this piece of code you'll need to place it where you want the tool to appear on your theme, likely this will be near the top of your page, just after the opening <body> tag. Your blog will likely have some sort of 'wrapping' div, so you maybe want to place it inside of that.
You'll need to fiddle around a little bit to position it how you like.
To put both of these bits of code into your theme, you'll need to go to the 'Customize Theme' page and click on 'Edit HTML'.
I'm trying to use FancyBox for a gallery of 36 images, but whenever I click on the image to trigger FancyBox, the thumbnail helper does 2 really odd things:
1) loads an extra thumbnail of the image I clicked at the END of the gallery thumbnails
2) the thumbnail helper does not go to clicked image's corresponding thumbnail. instead, it goes to the new thumbnail of that image I made at the end of the gallery.
here is a link to what I have so far: http://lalalichan.com/temp/process_test6.html
At the bottom, you'll see the thumbnails that trigger the images into a display area. the images that appear in that display area are links that then trigger FancyBox.
everything else is working like it's supposed to; i can navigate between my images, i can close out of FancyBox, and when I click on the thumbnail that I want the correct corresponding image appears.
it's just this nuisance that's making an otherwise smooth functionality go to heck.
any kind of help would be appreciated, thanks so much in advance!
Fancybox will generate a thumbnail for each link with the class bound to it so if you have this script
$('.fancybox').fancybox({});
and 6 links with the same class as the selector bound to fancybox like
<a class="fancybox" href="{target}" .... etc
then fancybox will generate 6 thumbnails ... so far so good.
What is happening in your case, when you load your (demo) page, there are 6 (hidden) links with class="fancybox". Also there is an empty container (id="content") where you display your bigger thumbnails
<div style="width: 820px; height: 546px;" id="content"></div>
but when you click on any of the (non-fancybox) thumbnails at the bottom of your page, the container with id="content" is populated with a 7th link with class="fancybox", duplicating one of your original links, depending on which thumbnail you clicked ... so 7 thumbnails will be generated in fancybox after this action.
Since this link is appended at the end of the pile, it will be placed at the end of the gallery too.
Your are using another plugin (thumbnailScroller), which I believe is adding the extra element to the DOM.
EDIT : New questions asked:
I still don't fully understand how clicking on the scrolling thumbnails would populate the #content div with a seventh link. How could I stop it from doing that while still retaining all the functionality of the scroller?
Your code needs a bit of tweaks: first, you are duplicating your fancybox custom script ... you just need it once. Second, you just need to load either jquery.fancybox.js or jquery.fancybox.pack.js but not both.
Regarding the functionality you ask, what I would do is:
1: Move the hidden links from the DIV id="load" to DIV id="content"
2: change the css to
#content a {
position:absolute;
visibility: hidden;
}
3: change this script
$(function(){
$('.image').live('click',function(){
var href = $(this).attr('href');
if ($('#content').is(':visible')) {
$('#content').css('visibility','hidden');
}
$('#content').load('#load #'+href,function(){
$('#content').css('visibility','visible').hide().fadeIn('3000');
});
});
return true;
})
into this
$(function(){
$('.image').each(function(i){
$(this).bind('click', function(){
$("#content a").css('visibility','hidden').eq(i).css('visibility','visible').hide().fadeIn('3000');
}); // bind
}); // each
return false;
});
assuming that the thumbnails are in the same order as the links inside the DIV with id="content".
I haven't tested the code but it's pretty much what would do the trick
EDIT 2: code improved Some changes to the css and js
New css:
#content a {
position:absolute;
display: none; /* was visibility: hidden; */
}
new js: displays the first big thumbnail on page load
$(function(){
$("#content a").eq(0).show();
$('.image').each(function(i){
$(this).bind('click', function(){
$("#content a").hide().eq(i).fadeIn('3000');
}); // bind
}); // each
return false;
});
BTW, I wouldn't add inline styles (using the style attribute), I would use style sheets instead.
I need help on showing photos larger when you click them.
Let me explain better.
I am doing an art project. I am using MVC(model-view-controller) on CodeIgniter and I want ,if it is possible to show me the code,and where to put it...so when I click on the image it becomes larger,like the photos on facebook...they are small but when u click on them they became larger so you can better see the image.
Any idea ?
Would be appreciated :)
Ok here's the js fiddle:
http://jsfiddle.net/tK6up/2/
and here's the code. It assumes you're using the latest jQuery library:
HTML:
<img class="small_img" src="http://www.fleces.com/media/images/fleces_logo.png" style="width:100px;" />
<div id="large">
</div>
CSS:
#large{
display:none;
position:absolute;
z-index:100;
top:10%;
left:10%;
}
.small_img{
width:100px;
}
jQuery:
$(document).ready(function(){
$('.small_img').on('click', function(){
$('#large').html($(this).clone().removeClass('small_img')).fadeIn("medium");
});
$('#large').on('click', function(){
$(this).fadeOut("medium");
});
});
Keep in mind I just threw this together. I don't know what facebook does since I don't use that site. I just went by your description. In reality you might use lightbox to handle the popup and almost certainly you would re-style the css to fit your needs. But, as per your outline, this will work.