I am about to use any lightbox, colorbox, or fancybox. However, when I read the documentation for all of them, it looks like the images are displayed as an overlay. What I like to do is display the image in a set div above the thumbnails. So, to explain more, here is a sample of html that I like to have
<div class="selected-image">
<!-- This div will be large in dimentions, and will display the selected thumbnail image -->
</div>
<div class="thumbnails">
<!-- This div will have a list of all the thumbnails available -->
</div>
Clicking on any image inside .thumbnails will result in changing the image in .selected-image
Is it possible to do so? If now, what is the alternative?
Thanks.
Related
I am content with my current theme but the photosets are not laying out properly, they are the same width with my photos but say for instance i reblog a photoset with the photos side by side, it wont show up that way on my blog it will show up underneath each other and that is very frustrating since it makes the images blury.
This is my photoset html code. Is there anyway to correct this?
</div>
{/block:Photo}
{block:Photoset}
<div class="entry">
<div class="photosetbox">
{block:Photos}
<img src="{PhotoURL-HighRes}" class="highres">
{/block:Photos}
{block:IndexPage}
<div class="photosett">
{block:Date}
{block:NoteCount}{NoteCountWithLabel} • {/block:NoteCount}{12Hour}:{Minutes} {CapitalAmPm}
{/block:Date}
</div>
<div class="photoset_a">
</div>
{/block:IndexPage}
</div>
Photoset Photos
Your current code specifies that you want each photo from photoset to rendered in the html as an img tag:
{block:Photos}
<img src="{PhotoURL-HighRes}" class="highres">
{/block:Photos}
To render a photoset, you have two options. Either use the built in feature / theme operator. This will give you an iframe with a photoset prebuilt inside it:
{Photoset-700}
Or use a plugin to take your current code and turn it into a photoset.
References
Tumblr Theme Operators - Photosets
Photoset Grid jQuery Plugin
I would like to put an image on another image like it is done in Facebook, Google+ and now Twitter.
Large back image with a smaller one on the left side dropping off the large one, if that makes sence
There's several ways you can do this, 1 of them is using position (so you're on the right track).
Place 2 images inside an element that has position:relative and place the top image position:absolute, like so:
<div style="position:relative">
<img alt="" src="foreground.jpg" />
<img alt="" style="position:absolute; left:40px; top:20px" src="background.jpg" />
</div>
Check out this DEMO
Another way would be to have the background image set as a background on the <div> and place the image you want on top directly inside that div. Check out this 2nd DEMO
I am using a responsive image slider which I am trying to put inside a colorbox however firstly when the colorbox pops up, it opens a blank tiny content box, I want the image slider to appear within the colorbox. The content opens up fine in the colorbox live on my site so can't understand why I can't replicate this in the fiddle.
Secondly, it seems that colorbox doesn't adapt it's size as the browser window is shrunk, is this something that can be changed? I tried setting max-height and max-width in colorbox.js to 100% but that doesn't make any difference.
I have spent most of yesterday trying to sort this but had no luck so far so any help you could give would be appreciated.
The HTML:
<a class="colorbox-link fade_hov" href="#port1">Click to open colorbox</a>
<div style="display: none;">
<div id="port1">
<div>
<div id='ninja-slider'>
<ul>
<li><div data-image="http://www.yourdesignpartner.co.uk/dev/wp-content/themes/colorroom/ninja-slider/img/md/1.jpg"></div></li>
<li><div data-image="http://www.yourdesignpartner.co.uk/dev/wp-content/themes/colorroom/ninja-slider/img/md/2.jpg"></div></li>
<li><div data-image="http://www.yourdesignpartner.co.uk/dev/wp-content/themes/colorroom/ninja-slider/img/md/3.jpg"></div></li>
<li><div data-image="http://www.yourdesignpartner.co.uk/dev/wp-content/themes/colorroom/ninja-slider/img/md/4.jpg"></div></li>
<li><div data-image="http://www.yourdesignpartner.co.uk/dev/wp-content/themes/colorroom/ninja-slider/img/md/5.jpg"></div></li>
</ul>
</div>
</div>
The CSS and JS is linked to externally in this Fiddle THIS FIDDLE Here is the fiddle without the colorbox which, as you can see, is responsive.
So I just need a way of being able to click a link which opens up the slider in a popup window, if there are any other options or perhaps a mobile responsive lightbox available please let me know.
Used fancybox instead of colorbox which it seems is fully responsive to mobile so problem solved.
I would like to have a page with both an image gallery and a slideshow. The slideshow should be started when I click the link, the normal ColorBox should be used when I click one of the images.
What I do now is group all the images with a rel. For the slideshow link I use the following code:
<a rel="slideshow" href="#">Display slideshow</a>
In the configuration for colorbox I define rel as the rel I use for the images. This works almost, the problem I have with this is that I get an extra empty page at the beginning.
How can I start a slideshow of an image gallery, using a text link?
I searched for how to do this for a long time, and finally found the answer on - where else - the F.A.Q for Colorbox. The example is worded a bit differently though so it wasn't as easy to find as you might think. Especially if you're asking question in these terms, like I was.
<div style="display:none;"> <!-- optionally hide this div -->
<a rel="gallery" href="/slideshow/one.jpg">Caption 1</a>
<a rel="gallery" href="/slideshow/two.jpg">Caption 2</a>
<a rel="gallery" href="/slideshow/three.jpg">Caption 3</a>
</div>
<a id="openGallery" href="#">Display slideshow</a>
<script type="text/javascript">
var $gallery = $("a[rel=gallery]").colorbox();
$("a#openGallery").click(function(e){
e.preventDefault();
$gallery.eq(0).click();
});
</script>
http://jacklmoore.com/colorbox/faq/#faq-click
Here's an example of my markup:
<li class="tumblr_post tumblr_photo_post">
<img class="tumblr_photo" alt="Testing photo post" src="http://29.media.tumblr.com/tumblr_li5e4zfgrd1qi4tmio1_400.png">
<div class="tumblr_caption">
<p>Testing photo post</p>
</div>
</li>
I'd like to change the size of the image's container without changing the image's size. As it's directly in the flow as an img, how can I do this?
I think your image is not contained into a div container like you are doing with the video on top.
Try to use the following jQuery code to add the img into a div container. You will have to add the jQuery library to your page of course.
$('.tumblr_photo').wrap('<div class="somename" />');