Firstly there are 101 questions similar to this one, however still unable to answer this question.
I am creating a similar interface to youtube, with video thumbnails on the right side and a pain playing pane.
My loop for displaying thumbnail images is as follows:
<?php function getVimeoThumb($id) {
$data = file_get_contents("http://vimeo.com/api/v2/video/$id.json");
$data = json_decode($data);
return $data[0]->thumbnail_medium;
} ?>
<div id="thumb">
<img src="<?php echo getVimeoThumb($id);?>" alt="">
<h4><?php the_sub_field('child_title'); ?></h4>
</div>
My main feature video is displayed as follows:
<div id="feature">
<h4 id="mainTitle"><?php the_sub_field('video_title'); ?></h4>
<iframe src="https://player.vimeo.com/video/<?php the_sub_field('video_id')?>" width="500" height="282"></iframe>
</div> <!-- end of feature Container -->
The initial load will be conducted by PHP, however the DOM manipulation should be achieved by javascript.
Questions
How can I swap just the ID and text between these two divs.
I would also like to hide the thumbnail that has been clicked as it is shown in the feature frame.
Many thanks
On your thumb, you could put the id on a rel on your div so you can retrieve it easily via jQuery:
`<div id="thumb" rel="your_id">...</div>`
And a $('#thumb').attr('rel') to get it.
Then you can create a JavaScript function that gives you the full URL from the ID and update your iframe src via $('#feature iframe').attr('src','your_url')
Related
I have recently found and purchased a beautiful HTML5 Ajax template that includes a gallery section in the main content section of the page that looks like this:
<!-- Main Content -->
<div class="ajax-inserted-content">
<!-- Section Gallery -->
<section class="section gallery grid layout-4-col">
<div class="container">
<div class="row">
<!-- Gallery Item -->
<div class="col-3 col-lg-4 col-md-6 col-sm-12">
<div class="gallery-item">
<div class="gallery-img">
<img data-lazy-image
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjwvc3ZnPg=="
data-src="img/demo-img-2.jpg" alt="Demo img">
</div>
</div>
</div>
<!-- /Gallery Item -->
Now, I can add images manually to the gallery and in the HTML file by copy/pasting the "Gallery Item" sections and adding the image src and so on, but I have whole folders full of images (all .jpg but with different and various titles) so this is not an option.
About a decade ago I had a Flash website that had a gallery that was populated from folders using - as far as I can remember - an XML/PHP combination. There was no need to edit the actual HTML document. I expected there to be a (simple) PHP/XML option with this modern photography template, but alas. The developer of the template can't help me out either so now I'm stuck with a beautiful but useless template if I can't get this proces of populating the galleries and albums automated.
Thus my questions are as follows:
is there a customisable tool (like a plugin?) that can automate this for me that I can install server side so I have a wysiwyg option to upload images (drag and drop, upload from folder, etc) and point to the HTML page/code/gallery section into which the images need to be displayed?
if option 1 is not available, then are there ready-made XML/JSON/PHP scripts available anywhere that will do the same with a minimal amount of coding for customisation (possibly with only the need to upload image files and edit an XML file to get the images displayed in the HTML gallery page properly)?
if option 1 and 2 are not possible, does anyone have a solution for this issue?
I know there are plenty of options out there and have found various and simple-looking (PHP/JS) scripts and code that claim to do exactly this, but they all involve creating a simple HTML page and gallery from scratch. I have no idea how to customise all that code to work with my HTML/CSS/JS website...
So I'm very much hoping that your suggestions will give me a budget-friendly solution, or I will have to buy me a totally new template that has the automated gallery scripts built-in
The PHP way
a PHP loop generated from scadir() would make this pretty easy.
https://www.php.net/manual/en/function.scandir.php
I'm assuming the src="data:image/svg+xml;base64,PH... is a placeholder, the same for each image
<div class="ajax-inserted-content">
<!-- Section Gallery -->
<section class="section gallery grid layout-4-col">
<div class="container">
<div class="row">
<?php
$imagesPath = '/imgportfolio/';
// this is assuming your website has a folder at the document-root level called 'portfolio-images'.
// document-root means where your top level index.html (or index.php) is.
$dir = $_SERVER['DOCUMENT_ROOT'] . $imagesPath;
$files = scandir($dir);
$exts = ['png','jpg','jpeg','gif','bmp','webp'];
foreach ($files as $file) {
if ($file === '..' || $file === '.') continue;
$ext = explode(".", $file);
$ext = strToLower($ext[count($ext)-1]);
if (!in_array($ext, $exts)) continue; // if not a valid image file, skip
?>
<div class="col-3 col-lg-4 col-md-6 col-sm-12">
<div class="gallery-item">
<div class="gallery-img">
<img data-svg="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjwvc3ZnPg==" src="<?php echo $imagesPath . $file;?>" alt="Demo img">
<!-- <img data-lazy-image src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjwvc3ZnPg==" data-src="<?php echo $imagesPath . $file;?>" alt="Demo img"> -->
</div>
</div>
</div>
<?php }?>
Also, for testing (if you suspect PHP errors,) you can put this at the top of your page
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
?>
The (I don't want to use) PHP Way
There are some experimental features out there for reading a filesystem using javascript. For the most part they're not embraced by all modern browsers (IE doesn't allow them at all), and the complexity they introduce is more than you probably want to deal with.
However, in the past I have used this trick to create a simple portfolio. It requires your (re)naming your images to be in a predictable numeric sequence like
1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg, 6.jpg, 7.jpg, etc...
In your case the implementation would look like this:
<div class="ajax-inserted-content">
<section class="section gallery grid layout-4-col">
<div class="container">
<div class="row" id='gallery-items'>
</div>
</div>
</section>
</div>
<script>
function doPortItem(n) {
let img = document.createElement('img');
img.src = './imgportfolio/' + n + '.jpg';
img.addEventListener('load', () => {
let div = `<div class="col-3 col-lg-4 col-md-6 col-sm-12">
<div class="gallery-item">
<div class="gallery-img">
<img data-lazy-image data-src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjwvc3ZnPg==" src="${img.src}" alt="Demo img">
</div>
</div>
</div>`;
document.querySelector('#gallery-items').innerHTML += div;
doPortItem(++n)
})
}
doPortItem(1)
</script>
Notes - Files must start with 1.jpg and have to be sequential. It loops through the numbers until it finds a X.jpg that doesn't exist, then it stops. Also, this looks for a folder called imgportfolio in the same directory as the .html file. Tested and works!
I have ACF set up to be called into a fancybox. It's pulling in the fields (because I can see the hardcoded header information) but nothing from the ACF. I've set the link to call an ID which is then assigned to the section I want to call when clicked.
I expect to click the image and open the fancy box with the ACF image and content displaying in the fancybox. What I get is header fields and no acf content.
I've tried removing the display none from the class.
I tried hard coding a basic a tag calling a p and that seemed to work, but when I put in the ACF information, it breaks.
I also removed all of the php and just hard coded in an image and content, and it works. It just doesn't like the php calling my ACF.
<a href="#popup" data-fancybox>
<img class="image" src="<?php the_field('project_image', get_the_ID()); ?>" />
</a>
<section id="popup">
<img src="<?php the_field('project_image', get_the_ID()); ?>">
<h3>About</h3>
<p><?php echo $about_content;?></p>
<hr class="hr-left">
<h3>Features</h3>
<p><?php echo $features_content; ?></p>
<a class="btn secondary-btn" href="<?php echo $code_reference_url; ?>"><?php echo $button_text; ?></a>
</section>
When the image is clicked, a fancy box will open and display the content within the "popup" div. What's happening is that it's opening the lightbox and populating with empty fields.
I was able to resolve this. I didn't have the information operating inside the loop. See solution below:
<?php while ($loop->have_posts()) : $loop->the_post();
$about_content = get_field('about_content');
$features_content = get_field('features_content');
$button_text = get_field('button_text');
?>
Hi I am using ImageFlow plugin in my website to add cover flow effect to set of images. I have gone through the documentation and tried with different examples they works fine but the major problem is that images are invisible when i first load the page, but appears as soon as i resize the browser window size manually by mouse. Below is the code where i used Imageflow class.
<div id="unique_name" class="imageflow">
<?php foreach ($ABC['A'] as $ABC) : ?>
<img src="../<?= $ABC['dir'] . $ABC['image'] ?>" width="200" height="200" />
<?php endforeach; ?>
</div>
So I can't find myself an answer or explanation for a problem / question I have.
What I want to achieve is pretty complicated. For illustrating, here's a JSFiddle - http://jsfiddle.net/GXaeL/3/
Could someone explain me, is this even possible to show the content of first row posts in one div below them. Same thing for the second row of posts etc.
I myself have had in mind that:
To combine somehow Tabs and Accordions?
This is purely an CSS positioning problem?
This is far more complicated than just accordions and CSS?
Since now, I have a PHP code, that creates a grid of posts. .posts are floated left and the row cleared when it hits 3.
<div class="post">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail('thumbnail');
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/fallback_image.jpg" alt="<?php the_title(); ?>" />
<?php } ?>
</a>
</div>
<?php
if($c == $bpr) :
?>
<div class="clr"></div>
<?php
$c = 0;
endif;
?>
<?php
$c++;
endwhile;
?>
<div class="clr"></div>
May-be someone can push me to the right path on this?
I'm not exactly sure what your preferred implementation would be, so I'll offer a couple options.
The first option is similar to you put together on jsFiddle, except I wrapped the "trigger" <div> tags in a <div> of their own and added a "content" <div> tag to the single "content" <div> tag that you were sliding down and up... easier explained in code:
<div id="row1" class="item-info">
<div class="item">item-1</div>
<div class="item">item-2</div>
<div class="item">item-3</div>
<div class="item">item-4</div>
</div>
<div id="contentRow1" class="item-info" style="display:none;">
<div class="item-content">content div for item-1</div>
<div class="item-content">content div for item-2</div>
<div class="item-content">content div for item-3</div>
<div class="item-content">content div for item-4</div>
</div>
For this solution, the jQuery code you were using wouldn't need to change.
The second option is a bit more complex, but it allows each answer to be displayed individually rather than having to be displayed with all the other answers in the row.
Admittedly, there may be a more elegant, or jQuery UI-focused solution, but that's fine... I'll learn from that, too.
For now, I'll offer the details of Option 2 on jsFiddle, which I forked from what you offered in your question.
Let me know if you have questions, and I hope this helps.
I have up and down arrows on the right hand side of each section where if you click them it scrolls either up or down sections.
<div class="next_section"><a id="after_contact"><img src="<?php echo get_stylesheet_directory_uri() ?>/img/arrow_top.png" width="73" height="36" alt="Prev Section"></a></div>
<div class="next_section"><a id="after_work5"><img src="<?php echo get_stylesheet_directory_uri() ?>/img/arrow_next.png" width="73" height="36" alt="Next Section"></a></div>
Problem is, not all of the arrows are working to scroll up and down the page. Some work, some don't. I have made the on each correct to my knowledge with it being an area above or below but if you click on some arrows, it won't do anything.
Any one know what is going wrong?
URL: http://www.londonadvertising.com/2011
Pastie link: http://pastie.org/2913679
Many Thanks
The problem with the page navigation is that not all the < a > tag ids are unique.
The JavaScript is only finding the first the element with a particular ID and only that one will work. All others with the name ID after that will not do anything.
If you check, the only arrows that work are the first occurrences of a particular ID.
Ensure that all < a > tags under a div will class 'next_section' have a unique ID
<div class="next_section first">
<a id="after_work1"> <!-- <<<< ID must be unique -->
<img src="something.jpg" alt="Next Section">
</a>
</div>